网页开发-大作业

最新推荐文章于 2023-04-16 11:26:06 发布

MartinYP

最新推荐文章于 2023-04-16 11:26:06 发布

阅读量316

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/MartinYP/article/details/126324001

版权

2022年8月13日周六学习时长：5h。

今日完成：大致网页的html+css布局

明日：完成js代码

完整源代码待明日完成再上传

部分html代码展示：

<body>
	<!--header begin-->
	<div class="header">
		<div class="show-nav sm-hide">
			<ul>
				<li class="active"><a href="index.html">首页</a></li>
				<li><a href="aboutus.html">关于我们</a></li>
				<li><a href="reading.html">阅读</a></li>
				<li><a href="find.html">发现</a></li>
				<li class="login"><a href="####">登录</a></li>
			</ul>			
		</div>
		<div class="hide-nav lg-hide">
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="aboutus.html">关于我们</a></li>
				<li><a href="reading.html">阅读</a></li>
				<li><a href="find.html">发现</a></li>
				<li class="login"><a href="####">登录</a></li>
			</ul>				
		</div>
		<div class="logo lg-hide">
			<a href="index.html"><img src="images/logo.png">居家小能手</a>
		</div>		
		<div class="toggle-btn lg-hide">
			<span></span>
			<span></span>
			<span></span>
		</div>		
	</div>
	<!--header end-->
	<!--banner begin-->
	<div class="banner">
		<div class="text">
			<p>体验居家，享受生活</p>
			<p><a href="#">点击下载APP</a></p>
			<div class="btn">
				<a href="#"><img src="images/banner-btn.png"></a>
			</div>
		</div>
	    <div class="swiper-container">
	       <div class="swiper-wrapper">
		        <div class="swiper-slide">
					<div class="pic">
						<div>
							<img src="images/banner-pic1.png">
						</div>
					</div>
		        </div>
		        <div class="swiper-slide">
					<div class="pic">
						<div>
							<img src="images/banner-pic2.png">
						</div>
					</div>
		        </div>
		        <div class="swiper-slide">
					<div class="pic">
						<div>
							<img src="images/banner-pic3.png">
						</div>
					</div>
		        </div>		        
		    </div>	    
	    </div>
	    <div class="pagination"></div>
	</div>
	<!--banenr end-->
	<!--快捷链接 begin-->
	<div class="quicklink">
		<ul>
			<li class="li-a">
				<a href="#"></a>
				<p class="p1">首页</p>
				<p class="p2">了解每日贴士；聚焦热点话题；品味深度好文。</p>
			</li>
			<li class="li-b">
				<a href="#"></a>
				<p class="p1">阅读</p>
				<p class="p2">细分4大模块，对居家生活每个了解更透彻。</p>
			</li>
			<li class="li-c">
				<a href="#"></a>
				<p class="p1">消息</p>
				<p class="p2">了解版本更新内容，还能为我们提供建议。</p>
			</li>
			<li class="li-d">
				<a href="#"></a>
				<p class="p1">我的</p>
				<p class="p2">保留用户收藏，浏览信息，定时消息推送等。</p>
			</li>			
		</ul>
	</div>
	<!--快捷链接 end-->
	<!--核心功能 begin-->
	<div class="hexin-cont">
		<div class="hexin">
			<div class="title">
				<p class="p1"><img src="images/hexin-title.png"><em>核心功能</em></p>
				<p class="p2">只为您提供最优质、最满意的用户体验。</p>
			</div>
			<div class="scroll-pic sm-hide"><!--pc端显示-->	
				<ul>	
					<li class="no0"><img src="images/hexin-pic1.png"/></li>	
					<li class="no1"><img src="images/hexin-pic2.png"/></li>	
					<li class="no2"><img src="images/hexin-pic3.png"/></li>
					<li class="no3"><img src="images/hexin-pic4.png"/></li>
					<li class="no4"><img src="images/hexin-pic5.png"/></li>
					<li class="denghou"><img src="images/hexin-pic6.png"/></li>	
				</ul>	
				<span class="left"></span>	
				<span class="right"></span>
			</div>
			<div class="scroll-m lg-hide"><!--移动端显示-->
			    <div class="swiper-container1 lg-hide">
			       <div class="swiper-wrapper">
				        <div class="swiper-slide">
							<img src="images/hexin-pic1.png"/>
				        </div>	
				        <div class="swiper-slide">
							<img src="images/hexin-pic2.png"/>
				        </div>	
				        <div class="swiper-slide">
							<img src="images/hexin-pic3.png"/>
				        </div>	
				        <div class="swiper-slide">
							<img src="images/hexin-pic4.png"/>
				        </div>
				        <div class="swiper-slide">
							<img src="images/hexin-pic5.png"/>
				        </div>	
				        <div class="swiper-slide">
							<img src="images/hexin-pic6.png"/>
				        </div>			        
				    </div>
			    </div>	
			    <a class="arrow-left" href="####"></a> 
			    <a class="arrow-right" href="####"></a>
			</div>	
		</div>		
	</div>
	<!--核心功能 end-->
	<!--登录注册 begin-->
	<div class="login-mask">
		<div class="box">
			<span class="close-btn"></span>
			<div class="tab-btn">
				<span class="active">账号登录</span>
				<span>账号注册</span>
			</div>
			<ul>
				<li>
					<div class="input-box">
						<i class="icon1"></i>
						<input type="text" placeholder="邮箱/会员帐号/手机号"/>
					</div>
					<div class="input-box">
						<i class="icon2"></i>
						<input type="text" placeholder="请输入密码"/>
					</div>
					<a href="usercenter.html" class="button">登录</a>
				</li>
				<li>
					<div class="input-box">
						<i class="icon1"></i>
						<input type="text" placeholder="邮箱/会员帐号/手机号"/>
					</div>
					<div class="input-box">
						<i class="icon2"></i>
						<input type="text" placeholder="请输入密码"/>
					</div>
					<p class="xieyi"><a href="#">居家小能手使用协议</a></p>
					<a href="usercenter.html" class="button">注册</a>
				</li>				
			</ul>
		</div>
	</div>
	<!--登录注册 end-->
	<!--footer begin-->
	<div class="footer">
		<ul>
			<li><a href="aboutus.html">关于我们</a></li>
			<li><a href="#">使用规范</a></li>
			<li><a href="#">合作伙伴</a></li>
			<li><a href="#">客服中心</a></li>
			<li><a href="#">隐私保护指引</a></li>
		</ul>
	</div>
	<!--footer end-->