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

1.HTML主体格式基本结构

标题

主要内容

解说：整个HTML格式分为两大部分，一个是head部分，一个是body部分，其中head部分是用于书写网页样式，而body部分用于书写网页主题

2.常用标签：

标题标记

...

加粗

倾斜

换行

空格

图片【gif，png，jpg】src:图片的链接地址 alt：图片加载失败的时候，在图片原本的位置显示的提示文本

title：鼠标悬停的时候，显示的提示文本

超链接  href：链接地址  target：打开新网页的打开方式，默认是在本页面打开

3.css样式：

内联样式： 标记>

内部样式：在head中添加

4.选择器：

(1)标签选择器：在<>中的标记都可以作为标签选择器

语法：

标记{

属性1：属性值1；

属性2：属性值2；

}

(2)class选择器：必须在style中进行声明，在标签中进行引用，声明的时候使用“.”进行声明，多个class选择器可以同时作用于一个标记。

语法：

.color1{

属性1：属性值1；

属性2：属性值2；

}

.color2{

属性1：属性值1；

属性2：属性值2；

}

M

id选择器：必须在style中进行声明，在标签中进行引用，声明的时候使用“#”进行声明，他是唯一的，取名的时候不能使用关键字

语法：

#color1{

属性1：属性值1；

属性2：属性值2；

}

#color2{

属性1：属性值1；

属性2：属性值2；

}

M

:hover 伪类选择器，表示鼠标经过事件

包含选择器：必须要有包含的关系

比如：.box p

(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)列表

无序列表

• ...

有序列表

type的取值：1、a、A、i、I

自定义列表

名词

解释

(10)css样式：

外部样式的引用

去掉下划线：

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来定义 ：

锚点

定义锚链接，使用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)

代码：

CNDS

/*上面这部分是书写这个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;

}

(三)一个完整页面的设计

1.功能需求

(1)以设计稿为主，页面宽度可以参考下面网址，设计稿相对于下面网址做了小修改

(2)总时间为4小时 首页和文章详情页面(如图)

(3)详情页面的新闻详情不需要自己单独排版，随便复制内容 调整 行高 和字体大小就可以了

(4)轮播先用一张图片代替  images文件夹已经提供

(5)分享也用一张图片代替，images文件夹已经提供

(6)页面的制作完全按照设计稿   文字 和图片可以随便复制，但是布局出来的效果要和设计稿一样

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

2.代码实现

上机考试

.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;

}

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

---------------------

作者：柏舟1230

来源：CSDN

原文：https://blog.csdn.net/qq_28891989/article/details/80290000

版权声明：本文为博主原创文章，转载请附上博文链接！