蓝色简洁形式HTML时尚女性服装网页模板代码



2 6 3



模板描述:蓝色 简洁 HTML 时尚女性服装 网页模板代码,蓝色简洁形式HTML时尚女性服装网页模板代码HTML模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/fontawesome-all.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,500,600" rel="stylesheet">

2. HTML代码

    <!-- //banner -->
	<section class="w3l-banner">
			<div class="nav-sec  position-relative">
			<nav>
					<ul id="menu">
				  <li>
					<input id="check01" type="checkbox" name="menu"/>
					<label class="menulist" for="check01">&nbsp;</label>
					<ul class="submenu">
                        <li><a href="index.html"  class="active">Home</a></li>
                        <li><a href="#about" class="scroll">About</a></li>
                        <li><a href="#service" class="scroll">Services</a></li>
                        <li><a href="#news" class="scroll">News</a></li>                           
						<li><a href="contact.html">Contact</a></li>
					</ul>
				  </li>
				</ul>
				</nav>
            </div>
		<div class="container">
			<div class="baner-text text-center">
				<h3><a href="#">Styled</a></h3>
				<h6 class="mx-auto mt-4 pt-2">porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est</h6>
				<a class="btn btn-primary mt-lg-5 mt-3 agile-link-bnr scroll" href="#about" role="button">Learn More</a>
				<div class="banner-high-lights text-center">
					<div class="rotate">
						<a href="#about" class="scroll">
                               <span class="fa fa-arrow-down"></span>                 
						</a>
                    </div>	
				</div>
			</div>
		</div>
	</section>
	 <!-- what we do -->
	 <section class="wedo py-5" id="about">
		<div class="container py-lg-5">
			<div class="text-center">
				<h3 class="w3_head">Integer porttitor mollisar </h3>
				<p class="main_p mt-4 mb-4 pt-2 text-white text-center mx-auto">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est. Cras mi ipsum, consectetur ac ipsum </p>
			</div>
			<div class="wedo_top text-center py-5">
				<ul>
					<li><span class="fa fa-cog"></span></li>
					<li><span class="fa fa-code"></span></li>
					<li><span class="fa fa-copy"></span></li>
				</ul>
             </div>  
	 </div>
	</section>
	 <!-- //what we do -->
	 <!-- banner-bottom1 -->
	<section class="banner-bottom" id="news">
        <div class="banner-top row middle-grids">
			<div class="col-lg-4 advantage-grid-info1">
                <div class="advantage_left2 text-center">
                    <img src="images/g6.jpg" class="img-fluid" alt="">
                </div>
            </div> 
            <div class="col-lg-8 advantage-grid-info">
                <div class="advantage_left">
					<h3>Integer porttitor mollisar <br>lorem, at molestie</h3>
					<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est.</p>
				</div>
            </div>
        </div>
    </section>
	<!-- //banner-bottom1 -->
	<!-- banner-bottom2 -->
	 <section class="banner-bottom w3l-btm">
        <div class="banner-top row middle-grids">
		<div class="col-lg-8 advantage-grid-info">
                 <div class="advantage_left">
					<h3>Integer porttitor mollisar <br>lorem, at molestie</h3>
					<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est.</p>
				</div>
            </div>
		<div class="col-lg-4 advantage-grid-info1">
                <div class="advantage_left2 text-center">
                    <img src="images/g2.jpg" class="img-fluid" alt="">
                </div>
            </div> 
        </div>
    </section>
	<!-- //banner-bottom2 -->
	<!-- banner-bottom3 -->
	 <section class="banner-bottom">
        <div class="banner-top row middle-grids">
			<div class="col-lg-4 advantage-grid-info1">
                <div class="advantage_left2 text-center">
                    <img src="images/g3.jpg" class="img-fluid" alt="">
                </div>
            </div> 
            <div class="col-lg-8 advantage-grid-info">
                 <div class="advantage_left">
					<h3>Integer porttitor mollisar <br>lorem, at molestie</h3>
					<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est.</p>
				</div>
            </div>
        </div>
    </section>
	<!-- //banner-bottom3 -->
<!-- services -->
	<section class="slide-wrapper py-5" id="service">
		<div class="container py-lg-5">
		<div class="text-center">
			<h3 class="w3_head">Integer porttitor mollisar </h3>
			<p class="main_p mt-4 mb-4 pt-2 text-white text-center mx-auto">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est. Cras mi ipsum, consectetur ac ipsum </p>
		</div>
			<div class="services">
				<div class="row service_w3top mt-5 pt-lg-5">
                                <div class="col-lg-6 ser-lt">
                                    <div class="d-flex services-box">
                                        <div class="icon">
                                            <span class="fa fa-pencil"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h2>Inagittis Lacg</h2>
                                            <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                    <div class="d-flex services-box ser-midd">
                                        <div class="icon">
                                            <span class="fa fa-rocket"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Velitdipisc Inagittis</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
									<!-- .Services-box ends here -->
                                    <div class="d-flex services-box bx-4">
                                        <div class="icon">
                                            <span class="fa fa-paint-brush"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Sagittis Lacus</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                </div>
                                <!-- .Col ends here -->
                                <div class="col-lg-6 ser-rgt">
                                    <div class="d-flex services-box bx-1">
                                        <div class="icon">
                                            <span class="fa fa-laptop"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Vulputate Velitdipisc</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                    <div class="d-flex services-box ser-midd bx-2">
                                        <div class="icon">
                                            <span class="fa fa-paint-brush"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Sagittis Lacus</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
									<!-- .Services-box ends here -->
                                    <div class="d-flex services-box bx-3">
                                        <div class="icon">
                                            <span class="fa fa-paint-brush"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Sagittis Lacus</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                </div>
                                <!-- .Col ends here -->
                            </div>
                            <!-- .Row ends here -->
							<!-- .Container ends here -->
        </div>
                    <!-- .Services ends here -->
	 </div>
</section>
			<!-- //services -->
			<!-- footer -->
	<section class="foot-top pt-lg-5">	
		<div class="container py-5">
			<div class="row pb-lg-5">
				<div class="col-lg-6 foot-top-left">
					<h1>Ut enim ad minim veniam,</h1>
					<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis nostrud exercitation</p>
				</div>
				<div class="col-lg-6 foot-top-rgt text-center">
					<a class="btn btn-primary  agile-link-bnr" href="index.html" role="button">Learn More</a>
					<div class="lear">
						<a class="btn btn-primary mt-4  agile-link-bnr1" href="contact.html" role="button">Contact</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<div class="cpy-right text-center py-5">
			<ul class="social_section_1info pt-lg-5 mb-lg-5">
				<li><a href="#"><span class="fa fa-facebook"></span></a></li>
				<li><a href="#"><span class="fa fa-twitter"></span></a></li>
				<li><a href="#"><span class="fa fa-google-plus"></span></a></li>
				<li><a href="#"><span class="fa fa-linkedin"></span></a></li>
			</ul>
			<p class="text-white">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
			</p>
		</div>
    <!-- //footer -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 大气 霸气 服装 服饰 服装公司 服饰公司 服装厂 服饰厂

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到