关于写页面的思路

最新推荐文章于 2022-09-01 11:06:48 发布

离天下之大谱

最新推荐文章于 2022-09-01 11:06:48 发布

阅读量433

点赞数

分类专栏：基础文章标签： html

本文链接：https://blog.csdn.net/qq_43679416/article/details/116545698

版权

基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文详细介绍了如何将网页分为头部、中部和尾部三个部分，并进行了细致的布局和设计。头部包含导航栏和背景，中部由中上和中中两部分组成，分别展示热门旅游信息和产品推荐。尾部则分为上半部分的合作伙伴展示和下半部分的版权信息。整个过程中，使用HTML和CSS进行结构和样式的定义，展示了网页设计的基本流程和技巧。

摘要由CSDN通过智能技术生成

我一般会把页面分为三个部分，头部、中部、尾部。

头部是除中间部分外所有在上半部分的内容。

中间部分就是中间的内容部分。

尾部就是除内容之外在下半部分和一些固定在网页左边或右边的元素。

例如↓

先把整个页面分成三个部分，再把三个部分按头中尾的方式再分三个部分。简单的就不用分，直接写。

分完后就用盒子写大概的结构，每个盒子都会有边框用来分辨。也可以直观的看到页面的结构。

写完结构后填充内容。确认无误后修改样式。剩下的基本就是复制粘贴了。

以上图头部为例↓

<div id="top">
	<div id="top1">
		<nav id="nav1" >
			<a href="#" id="a_top"><img src="img/logo.png"> </a>
			<span>
				<a href="gy.html" class="anav1" id="a_link" >公司简介</a> <span class="as_s">  </span>
				<a href="fj.html" class="anav1" id="a_link" >风景欣赏</a> <span class="as_s">  </span>
				<a href="jp.html" class="anav1" id="a_link"  >机票订购</a> <span class="as_s">  </span>
				<a href="lv.html" class="anav1" id="a_link"  >旅游资讯</a> <span class="as_s">  </span>
				<a href="sy.html" class="anav1" id="a_link" >首页</a><span class="as_s"></span>

			</span>
		</nav>
	</div>
</div>

把头部分成三部分。内容不够就两部分。分别是导航栏和背景。上面是导航栏。

背景↓

<div id="tophead">
	<div id="topinput">
		<input type="text" placeholder="请输入旅游景点或城市" id="input"><button id="botton" >搜索</button> 
	</div>
</div>

两部分大体结构写完了。接下来天成内容，修改样式↓

#nav1{height:70px;margin: 0 auto;
	text-align: center;line-height: 70px;}
#top{width: 100%;height: 70px;background: #333333;}
#top1{width: 1300px;height: 70px;margin: 0 auto;font-color: white;}
#a_top{float: left;}

.anav1{color: white;display: block;float: right;width: 80px;height: 70px;}

#a_link:visited{background: #000000;} 
#a_link:link{text-decoration:none; }
#a_link:hover{font-weight: bold; background: #000000;}


#tophead{margin: 0 auto;width: 1920px;height: 600px;
	background: url(img/search.jpg);background-repeat:no-repeat;}
#topinput{margin: 0 auto;height: 50px;width: 700px;line-height: 600px;}

完成。

中部分为中上部分和中间部分

中上↓

<div id="body_top">
	<h1>热门旅游</h1><br>
	<p id="p_text">国内旅游、国外旅游、自助旅游、自驾旅游、邮轮签证、主题旅游等各种最新热门旅游推荐</p>
</div>

修改样式↓

#body_top{height: 120px;width: 1300px;
	margin: 0 auto;padding-top: 20px;}
#p_text{font-size: 18px;color: #666666;text-align: center;}

中中部分↓ （像这种只要做出一个，剩下的复制粘贴就行。我一般还会套个大盒子把这些小的装起来）

<div id="body">
	<div id="body_box">
		<div id="box_text_top">国内长线</div>
			<div id="img_0"></div>
			<br>
		<span><曼谷-芭提雅七日游></span>
		<span  id="box_text">包团特惠，超丰富景点，升级一晚国五，无自费，更赠送600元/成人自费券</span><br><br>
  		<span id="box_botton">¥ <span style="font-size: 20px;">2864</span> 起</span> 
  		<span id="box_bottonr">满意度 77% </span> 
	</div>

修改样式↓

#body{width: 1300px;height: 1000px;margin: 0 auto;}

#body_box{width:390px;height: 320px;
	border: 1px solid #DDDDDD;
	padding: 4px 4px 4px 4px;float: left;
	margin-top: 10px;}

#body_box2{width:390px;height: 320px;
	border: 1px solid #DDDDDD;
	padding: 4px 4px 4px 4px;float: left; 
	margin-left: 25px;margin-right: 25px;
	margin-top: 10px;}

#box_text_top{width:80px;height: 30px;
	font-size: 15px;
	line-height: 30px;
	background:#59B200;
	text-align: center;
	color: white;float:left;}
#img_0{width: 390px;height: 220px;background: url(img/s1.jpg);}
#img_1{width: 390px;height: 220px;background: url(img/s2.jpg);}
#img_2{width: 390px;height: 220px;background: url(img/s3.jpg);}
#img_3{width: 390px;height: 220px;background: url(img/s4.jpg);}
#img_4{width: 390px;height: 220px;background: url(img/s5.jpg);}
#img_5{width: 390px;height: 220px;background: url(img/s6.jpg);}
#img_6{width: 390px;height: 220px;background: url(img/s7.jpg);}
#img_7{width: 390px;height: 220px;background: url(img/s8.jpg);}
#img_8{width: 390px;height: 220px;background: url(img/tour9.jpg);}

尾部也分为两部分先是上半部分的背景↓

<div id="bottom">
	<div id="bottom_body">
		<div id="bottom_body3">
     

		</div>
         </div>
</div>

填充内容↓

<div id="bottom">
	<div id="bottom_body">
		<div id="bottom_body3">
      	<dl>
        	<dt>合作伙伴</dt>
        	<dd>&nbsp;</dd>
        	<dd>途牛旅游网</dd>
          	<dd>&nbsp;</dd>
         	<dd>驴妈妈旅游网</dd>
        	<dd> &nbsp;</dd>
        	<dd>携程旅游</dd>
        	<dd> &nbsp;</dd>
        	<dd>中国青年旅行社</dd>
     	</dl>
		</div>
</div>

修改样式↓

#bottom{width: 100%;height: 320px;
	background: #222222;clear: both;
	margin-top:120px;}
#bottom_body{width: 1300px;height: 300px;
	background: #222222;
	clear: both;margin-top:120px;
	margin: 0 auto;padding-top :10px;}	

dd{font-size: 18px;color: #777777;}
dt{font-size: 25px;color: #CCCCCC;
	border-bottom: 1px dashed #333333;}

#bottom_body3{width: 400px;
	height: 320px;float: left;margin-left: 30px;}

尾部下半部分↓

比较简单就直接内容加样式一起写

<div id="bottom_11">
<div id="bottom_12">
 <span id="textss"> Copyright &copy; 飘城旅行社|苏ICP 备 120110119 号| 旅行社经营许可证：L-YC-BK12345</span>
</div>

</div>

#bottom_11{width: 100%;height: 80px;
	background: #000000;
	border-top: 1px solid #444444;}

#bottom_12{width: 1300px; height: 80px;
	margin: 0 auto; text-align: center;
	color: #444444;line-height: 60px;}

#textss{font-size: 18px;}

完成