制作静态网页，首页我们聊一下什么是静态网页。
通俗来讲，只用html标签和css制作的网页。那么我们如何制作呢，可以制作html网页的软件有很多，例如sublime,hbuilder,vscode等大部分编程软件，目前我们讲下Dreamweaver来制作一个静态网页。
一、准备工具
Dreamweaver 8 （或者cs3）以上任意版本
二、构思结构
要制作前需要先大致构思网页样子或者有现成的设计效果图
三、制作过程
打开软件，点击新建 html
新建之后是我们的网页代码 上面切换到代码视图，会看到一些软件本身自带的代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
我们先讲一讲<head></head><body></body> 这些是什么
这些是标签，一个网站要呈现不同的效果与样式，需要这些标签来保持区分，我们在body标签（body标签为正文，就是说网站看到的内容需要放在body标签内部才行）
<body>
<header class="head">
<img src="images/大图.jpg" />
<p>赵丽颖明星网站 Welcome to Zhao Liying's personal website</p>
</header>
<nav class="nav">
<ul>
<li class="one"><a href="index.html"><span class="fa fa-home"></span>我的首页</a></li>
<li><a href="lishi.html" ><span class="fa fa-user-circle-o"></span>个人信息</a></li>
<li><a href="xisu.html"><span class="fa fa-film"></span>演艺经历</a></li>
<li><a href="lao.html" ><span class="fa fa-smile-o"></span>人物评价</a></li>
<li><a href="photo.html" ><span class="fa fa-street-view"></span>杂志写真</a></li>
<li><a href="yan.html"><span class="fa fa-commenting"></span>在线留言</a></li>
</ul>
</nav>
<div class="content">
<div class="zhi"> <img src="images/img_04.jpg" /> <img src="images/img_06.jpg" /> <img src="images/img_03.jpg" /> <img src="images/a4.jpg" />
<div class="clearit"></div>
</div>
<div class="zhicici" style="padding-bottom:50px;"> <br />
<P>赵丽颖，1987年10月16日出生于河北省廊坊市，中国内地影视女演员。</P>
<P>2006年，因获得雅虎搜星比赛冯小刚组冠军而进入演艺圈；同年，在冯小刚执导的广告片《跪族篇》中担任女主角。2007年，参演个人首部电影《镖行天下之牡丹阁》。2011年，因在古装剧《新还珠格格》中饰演晴儿一角而被观众所认识。2013年，凭借古装剧《陆贞传奇》获得更多的关注。2014年10月，在第10届金鹰电视艺术节举办的投票活动中被选为"金鹰女神"；12月，凭借都市爱情剧《杉杉来了》获得第5届国剧盛典内地最具人气女演员奖 ；同年，成立海润传媒赵丽颖工作室。</P>
<P>2015年，主演的仙侠剧《花千骨》成为中国首部网络播放总量突破200亿的电视剧，并打破中国内地周播剧收视纪录 ，而其个人则凭借该剧先后获得第6届澳门国际电视节金莲花最佳女主角奖、第6届国剧盛典最具收视号召力演员奖、第22届上海电视节白玉兰奖最佳女主角奖提名、第28届中国电视金鹰奖观众喜爱的女演员奖。2016年，主演古装玄幻剧《青云志》 ；同年，担任河北省旅游形象大使</P>
</div>
</div>
<footer class="foot"><p>明星--赵丽颖</p></footer>
</body>
好了，写好html代码后开始写css代码
body {
font-size: 12px;
color: #000000;
line-height: 20px;
text-align: left;
background: pink;
width:960px;
margin:0 auto;
}
.head {
width: 960px;
height: 460px;
margin: 0 auto;
}
.head img {
width: 100%;
height: 100%;
object-fit: cover;
}
.head p{
width: 100%;
height: 35px;
text-align: center;
color: #FFFFFF;
background-color: #cc0000;
font-size: 17px;
vertical-align: middle;
}
nav ul li {
width: 151px;
height: 82px;
display: block;
line-height: 82px;
font-size: 16px;
float: left;
color: #fff;
font-weight: bold;
background: url(../images/bj.png) no-repeat;
margin-left: 5px;
}
.zhici p {
text-align: left;
text-indent: 2em;
}
.zhici {
width: 758px;
height: 190px;
padding: 10px;
border: 1px solid #000000;
}
.zhici img {
width: 210px;
height: 180px;
object-fit: cover;
padding: 3px;
border: 1px solid #666666;
}
.clearit{ clear:both}
.foot {
padding-top: 50px;
}
.foot p {
text-align: center;
line-height: 30px;
}
本文为原创html+css基础教程，需要下载代码复制这里打开 http://www.stu-html.com/a/shiyuanchengpin/2021/0130/373.html
