HTML静态网页设计 - 好文

第一周：HTML写静态网页

一、HTML理论介绍及常用格式

1.HTML主体格式基本结构<!DOCTYPE html>
<html>
<head>
<mate charset="utf-8"/>
<title>标题</title>
</head>
<body>
主要内容
</body>
</html>解说：整个HTML格式分为两大部分，一个是head部分，一个是body部分，其中head部分是用于书写网页样式，而body部分用于书写网页主题

2.常用标签：

标题标记

<h1></h1>
...
<h6></h6>

<p></p>段落标签

<b></b> <strong></strong>加粗

<i></i>倾斜

<br/>换行

空格
<img src="" alt="" title=""/> 图片【gif，png，jpg】src:图片的链接地址
alt：图片加载失败的时候，在图片原本的位置显示的提示文本
title：鼠标悬停的时候，显示的提示文本

<a href="" target=""></a> 超链接 href：链接地址 target：打开新网页的打开方式，默认是在本页面打开

<div></div> 盒子

<span></span>

3.css样式：

内联样式： <标记 style="属性1：属性值1；属性2：属性值2；..."></标记>
内部样式：在head中添加<style></style>

4.选择器：
（1）标签选择器：在<>中的标记都可以作为标签选择器
语法：
<style>
标记{
属性1：属性值1；
属性2：属性值2；
            }
</style>
（2）class选择器：必须在style中进行声明，在标签中进行引用，声明的时候使用“.”进行声明，多个class选择器可以同时作用于一个标记。
语法：
<style>
.color1{
属性1：属性值1；
属性2：属性值2；
            }
        .color2{
属性1：属性值1；
属性2：属性值2；
}
</style>
<p class= "color1 color2">M</p>
id选择器：必须在style中进行声明，在标签中进行引用，声明的时候使用“#”进行声明，他是唯一的，取名的时候不能使用关键字
语法：
<style>
#color1{
属性1：属性值1；
属性2：属性值2；
}
#color2{
属性1：属性值1；
属性2：属性值2；
}
</style>
<p id= "color1">M</p>

:hover 伪类选择器，表示鼠标经过事件
包含选择器：必须要有包含的关系
比如：.box p
<div class="box">
<p></p>
</div>

（5）常用的css属性：
width：宽取值px/%
height：高取值px/%
background-color 背景颜色
font-size 字体大小
font-weight：bold；字体加粗
line-height 行高
color 字体颜色
text-align：center/left/right 文本居中/居左/居右
border：边框宽度边框颜色边框样式；边框
box-showdow：水平阴影的位置，垂直阴影的位置，高斯模糊的距离，阴影的宽度，阴影的颜色以及透明度，阴影的样式
border-radius：边框圆角
transform：rotate(10deg) scale(1.2); 动画，旋转动画单位deg 缩放动画
transtion：all 0.3s；过渡动画，单位ms/s
margin：外边距
padding：内边距

(6)元素类型
块元素：
特征：独占一行，可以设置宽高，一般情况下作为容器。
若宽不指定的情况下默认与父元素宽度相等，若高不指定的情况下，则它的高度由其内容来决定。
对于块元素，我们若指定了宽度，可以使用margin-left与margin-right取值为auto来进行水平居

例如：div、p、h1~h6

行内元素：
特征：不独占一行，设置不上宽高。
行内元素的大小由其内容大小来决定。
例如：span、a

行内块元素：隶属于行内元素，但是又具有块元素的特征。
特征：既不独占一行，又能设置宽高。

(7).元素类型转换
display：block；转为块元素
display：inline；转为行内元素
display：inline-block；转为行内块元素

(8)浮动
float：left；左浮动
float：right；右浮动
作用：通过浮动，我们可以使块元素在同一行显示

(9)列表
无序列表
<ul>
<li></li>
<li></li>
...
</ul>

有序列表

type的取值：1、a、A、i、I
<ol type="">
<li></li>
<li></li>

</ol>

自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>

(10)css样式：
外部样式的引用
<link href="外部样式文件的地址"></link>

去掉下划线：
text-decoration: none;

去掉列表默认的样式：
list-style: none;

平移动画
transform: translateX(20px) ;
translateX：在x轴的平移，取值为正，向右平移，取值为负，向左平移
translateY：在y轴的平移，取值为正，向下平移，取值为负，向上平移。

(11)background：背景颜色背景图片链接地址背景图片平铺方式背景图片水平方向的位置背景图片垂直方向的位置
参数二：url("")
参数三：默认repeat，no-repeat 不平铺 repeat-x水平平铺 repeat-y垂直
参数四：默认left，取值left/right/center/px/%
参数五：默认top，取值top/bottom/center/px/%

(12)position定位
可以有四个方位进行定位：
left、top、right、bottom

绝对定位：position：absolute；
特征：参照物是具有定位属性的父元素，不占据原本的位置（脱离文档流）
相对定位：position：relative；
特征：参照物是自己原本的位置，占据自己原本的位置（不脱离文档流），一般情况下作为包含块

固定定位：position：fixed；
特征：参照物当前窗口，它的位置与父元素无关，也与当前所在位置无关。

(13)高度塌陷
高度塌陷出现的契机：当没有给父元素高度，并且它里面所有的子元素都发生浮动的时候，会出现高度塌陷。
why？父元素没有指定高度，那么它的高度由其子元素来决定，当子元素都给了浮动，【浮动是脱离文档流的（不再占据自己原本的位置）】，
父元素测量不到子元素的高度，高度显示为0
解决：
给父元素添加overflow：hidden；
在子元素的最后添加一个空盒子，并且给这个空盒子添加clear：both；

(14)opacity透明度
他的取值[0,1] 0:全透明 1：不透明

(15)display：none；隐藏

opacity：0；与display：none；区别
使用它们两个的时候，都可以实现不可见的功能，但是opacity：0的时候，这个元素它存在只是透明度发生变化
，而是display：none；这个元素不占据位置（移除）

(16)选择器的权重

“*”通配符权重为0000
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
内联样式的权重为1000
伪类选择器的权重 0010
群组选择器的权重等于它自己本身的权重
包含选择器的权重为所有权重之和

当属性出现重复的时候，会遵从权重高的那个，当权重相同的时候，后写的属性值会覆盖前面的那个

(17)图片整合
本质：就是对背景图片进行定位。
使用的契机：背景图片大于盒子的时候。

(18)锚链接
定义锚点，使用id来定义：<p id="back">锚点</p>
定义锚链接，使用a标签：<a href="#back">锚链接</a>

(19)overflow：hidden/scroll/auto
hidden：超出显示区域的部分隐藏
scroll：无论内容有木有超出显示区域，都会显示滚动条
auto：当内容超出显示区域的时候，则显示滚动条，否则不显示。

(20)子类选择器
.nav li:nth-child(1)，小括号中可以使用2n或者2n+1/2n+1，选中奇数或者是选中偶数个，
通过1/2/3...可以选中.nav下面的第n个li。

二、项目实战

（一）一些粗浅的想法。

1.拿到一个需求，第一步不是去按照自己的想法立刻去敲代码，首先应该做好规划，就以写静态网页为例，写规划的时间要远远小于你自己后期改代码的时间。

2.添加注释。添加注释是很好的习惯，在刚写代码的时候，添加的注释要尽可能的详细，这会为后期的维护和项目的交接提供很好的便利，不然没人看的懂你的代码。

3.变量名的选择。在取变量名的时候，千万不要使用拼音，因为拼音看多了，真的是接受不了。使用英文的变量名会好很多，见文知意。

4.代码书写完，功能实现之后，要去优化自己的代码，让自己的代码更加简洁，可读性更强

（二）书写项目导航栏（以CNDS为例）

首先：对于这个导航栏分析一下，第一个cnds图标放在一个盒子里（logo），然后给文字信息一个盒子（content），所以CNDS和文字信息都在同一个盒子（nav）

代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CNDS</title>
<style type="text/css"> /*上面这部分是书写这个box盒子的格式，其中包括大小，背景颜色，以及位置*/ .nav{ width:
1000px; height: 50px; /*给出背景颜色，可以更好的判断盒子的位置，最后再滤除背景颜色*/ /*background: red;*/
margin: 20px 10px; } .logo{ width: 95px; height: 40px; /*margin-top: 10px;*/
float: left; margin: 10px; } .logo img{ line-height: 40px; } .content{ width:
500px; height: 35px; margin: 5px; /*background: bisque;*/ float: left; }
.content ul{ /*去除列表格式*/ list-style: none; } .content li{ /*去除列表格式*/ list-style:
none; /*使列表排成一排*/ float: left; /*上下间隔为0，左右间隔为5个像素*/ margin: 0 5px; /*上下居中*/
line-height: 100%; } .content li a { /*去除超链接的下划线*/ text-decoration: none;
/*超链接的字体颜色：黑色*/ color: black; } .content li a:hover{ /*使用hover动画，改变鼠标经过事件*/
color: red; } </style> </head> <body>  <div
class="nav"> <div class="logo">  <img
src="img/CNDS.png"/> </div> <div class="content"> <ul> <li><a
href="#">首先</a></li> <li><a href="#">博客</a></li> <li><a href="#">学院</a></li>
<li><a href="#">下载</a></li> <li><a href="#">GitChat</a></li> <li><a
href="#">TinyMind</a></li> <li><a href="#">商城</a></li> <li><a
href="#">VIP</a></li> <li><a href="#">其他</a></li> </ul> </div> </div> </body>
</html>

（三）一个完整页面的设计

1.功能需求

（1）以设计稿为主，页面宽度可以参考下面网址，设计稿相对于下面网址做了小修改
（2）总时间为4小时首页和文章详情页面（如图）
（3）详情页面的新闻详情不需要自己单独排版，随便复制内容调整行高和字体大小就可以了
（4）轮播先用一张图片代替 images文件夹已经提供
（5）分享也用一张图片代替，images文件夹已经提供
（6）页面的制作完全按照设计稿文字和图片可以随便复制，但是布局出来的效果要和设计稿一样

原网站：http://yigujin.wang/

2.代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上机考试</title>
<style type="text/css"> .box{ width: 100%; height: 100%; /*background: red;*/ }
.box .head{ width: 100%; height: 105px; background: white; } .head .logo{
width: 235px; height: 65px; background: blue; float: left; margin: 0 20px;
background: url(img/logo.jpg) no-repeat; } .head .nav{ width: 650px; height:
65px; /*background: blueviolet;*/ float: right; margin: 0 200px; } .nav ul{
list-style: none; text-align: center; line-height: auto; } .nav li{ width:
75px; height: 25px; list-style: none; float: left; margin: 0 10px; text-align:
center; line-height: 25px; } .nav li a{ text-decoration: none; color: black;
font: 10px; font-weight: bold; display: block; } .nav li:nth-child(1):hover{
background: ; } .nav li:nth-child(2):hover{ background: red; } .nav
li:nth-child(3):hover{ background: red; } .nav li:nth-child(4):hover{
background: red; } .nav li:nth-child(5):hover{ background: red; } .content{
width: 1100px; height: 2500px; /*background: blue;*/ margin: 0 100px;
margin-bottom: 200px; } .main{ width: 800px; height: 100%; /*background:
green;*/ float: left; margin: 0 10px; } .main .bg{ width:800px ; height: 300px;
margin: 10px 0; } .bg img{ width:100% ; height: 100%; } .text1{ width: 100%;
height: 215px; } .text1 .bg-sb{ width: 270px; height: 200px; margin: 2px 2px;
float: left; } .bg-sb img{ width:100%; height: 100%; } .text1 .essay{ width:
380px; height: 200px; float: left; /*background: violet;*/ margin: 0 10px; }
.essay ul{ list-style: none; text-align: left; } .essay li{ list-style: none; }
.essay li:nth-child(1){ font-size: 18px; font-weight: bold; } .essay
li:nth-child(4){ font-size: 18px; font-weight: bold; margin: 10px ; } .essay li
a{ display: block; text-decoration: none; font-size: 12px; color:
rgb(168,181,213); float: left; margin: 0 10px; } .main .avd1{ width: 800px;
height: 200px; /*background: hotpink;*/ } .adv1 img{ width: 800px; height:
200px; } .consult{ width:240px; height: 100%; /*background: gold;*/ float:
left; margin: 0 20px; } .consult1{ width: 240px; height: 85px; /*background:
yellowgreen;*/ margin: 10px 0; } .consult1 img{ width: 100%; height: 85px;
margin: 10px 0; } .consult2{ width: 240px; height: 480px; /*background:
darkgrey;*/ border: 1px solid white; } .consult2 p{ font-size: 18px;
font-weight: bold; margin: 5px 5px; } .consult2 ul{ list-style: none; }
.consult2 li{ width: 200px; display: block; list-style: none; margin: 15px 0;
/*border: 1px dashed black;*/ border-bottom: 1px dashed black; } .consult2 li
a{ text-decoration: none; color: gray; } .foot{ width: 100%; height: 260px;
background: black; margin-bottom: 20px; } .title{ width: 1100px; height: 100px;
background: gray; margin: 10px 30px; } .title ul{ list-style: none; } .title
li{ list-style: none; float: left; margin: 0 10px; } .title li a{
text-decoration: none; color: white; } .num{ width:1100px; height: 50px;
margin: 100px 30px; } .num ul{ list-style: none; } .num li{ list-style: none;
float: left; margin: 0 10px; color: white; } </style> </head> <body> <div
class="box"> <div class="head"> <div class="logo"> </div> <div class="nav">
<ul> <li ><a style="color: red;"href="#">本站首页</a></li> <li><a
href="#">Nana主题</a></li> <li><a href="#">随笔笔记</a></li> <li><a
href="#">技术文档</a></li> <li><a href="#">手气不错</a></li> <li><a style="background:
rgb(192,30,34);color:white ;">搜索</a></li> </ul> </div> </div> <div
class="content"> <div class="main"> <div class="bg"> <img
src="img/banner.jpg"/> </div> <div class="text1"> <div class="bg-sb"> <img
src="img/news_pic01.jpg"/> </div> <div class="essay"> <ul>
<li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li> <li>老薛主机市面上大多数都是 9 折或 85
折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a href="">阅读26次</a></li>
<li><a href="">博主生活</a></li> <li><a href="">工作生活</a></li> </ul> </div> </div>
<div class="text1"> <div class="bg-sb"> <img src="img/news_pic01.jpg"/> </div>
<div class="essay"> <ul> <li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li>
<li>老薛主机市面上大多数都是 9 折或 85 折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a
href="">阅读26次</a></li> <li><a href="">博主生活</a></li> <li><a
href="">工作生活</a></li> </ul> </div> </div> <div class="text1"> <div
class="bg-sb"> <img src="img/news_pic02.jpg"/> </div> <div class="essay"> <ul>
<li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li> <li>老薛主机市面上大多数都是 9 折或 85
折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a href="">阅读26次</a></li>
<li><a href="">博主生活</a></li> <li><a href="">工作生活</a></li> </ul> </div> </div>
<div class="text1"> <div class="bg-sb"> <img src="img/news_pic01.jpg"/> </div>
<div class="essay"> <ul> <li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li>
<li>老薛主机市面上大多数都是 9 折或 85 折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a
href="">阅读26次</a></li> <li><a href="">博主生活</a></li> <li><a
href="">工作生活</a></li> </ul> </div> </div> <div class="text1"> <div
class="bg-sb"> <img src="img/news_pic02.jpg"/> </div> <div class="essay"> <ul>
<li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li>
<li>老薛主机市面上大多数都是9折或85折的优惠，经过与老薛主机首席运营官Mars的沟通联系，终于获得老薛主机终</li> <li><a
href="">阅读26次</a></li> <li><a href="">博主生活</a></li> <li><a
href="">工作生活</a></li> </ul> </div> </div> <div class="adv1"> <img
src="img/ad04.jpg"/> </div> <div class="text1"> <div class="bg-sb"> <img
src="img/news_pic02.jpg"/> </div> <div class="essay"> <ul>
<li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li> <li>老薛主机市面上大多数都是 9 折或 85
折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a href="">阅读26次</a></li>
<li><a href="">博主生活</a></li> <li><a href="">工作生活</a></li> </ul> </div> </div>
<div class="text1"> <div class="bg-sb"> <img src="img/news_pic01.jpg"/> </div>
<div class="essay"> <ul> <li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li>
<li>老薛主机市面上大多数都是 9 折或 85 折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a
href="">阅读26次</a></li> <li><a href="">博主生活</a></li> <li><a
href="">工作生活</a></li> </ul> </div> </div> <div class="text1"> <div
class="bg-sb"> <img src="img/news_pic01.jpg"/> </div> <div class="essay"> <ul>
<li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li> <li>老薛主机市面上大多数都是 9 折或 85
折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a href="">阅读26次</a></li>
<li><a href="">博主生活</a></li> <li><a href="">工作生活</a></li> </ul> </div> </div>
<div class="text1"> <div class="bg-sb"> <img src="img/news_pic02.jpg"/> </div>
<div class="essay"> <ul> <li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li>
<li>老薛主机市面上大多数都是 9 折或 85 折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a
href="">阅读26次</a></li> <li><a href="">博主生活</a></li> <li><a
href="">工作生活</a></li> </ul> </div> </div> <div class="text1"> <div
class="bg-sb"> <img src="img/news_pic02.jpg"/> </div> <div class="essay"> <ul>
<li>台下一年功，台上10分钟</li> <li>随笔笔记  :9小时前</li> <li>老薛主机市面上大多数都是 9 折或 85
折的优惠，经过与老薛主机首席运营官 Mars 的沟通联系，终于获得老薛主机终</li> <li><a href="">阅读26次</a></li>
<li><a href="">博主生活</a></li> <li><a href="">工作生活</a></li> </ul> </div> </div>
<div class="adv2"> </div> </div> <div class="consult"> <div class="consult1">
<img src="img/ad01.jpg"/> </div> <div class="consult2"> <p>最新文章</p> <ul> <li><a
href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li> <li><a
href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li> <li><a
href="#">帝国之双面佳人第六十章</a></li> <li><a
href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li> <li><a
href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li> </ul> </div> <div
class="consult1"> <img src="img/ad01.jpg"/> </div> <div class="consult2">
<p>最新文章</p> <ul> <li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li> <li><a
href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li> <li><a
href="#">帝国之双面佳人第六十章</a></li> <li><a
href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li> <li><a
href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li> </ul> </div> </div> </div>
<div class="foot"> <div class="title"> <ul> <li>友情链接:</li> <li><a
href="#">百度</a></li> <li><a href="#">博客</a></li> </ul> </div> <div class="num">
<ul> <li>copyright@zbpNana主题</li> <li>桂ICP备1400471号</li> <li>Theme by zbpNana
</li> <li>Powered by Z-BlogPHP</li> </ul> </div> </div> </div> </body> </html>

结束语：第一次写博客，还有很多欠缺的地方，请各位大神多多指教。

热门工具换一换