摄影分享网站开发——HTML布局与CSS要点分享

一、开发项目基础知识点与注意点：

1. HTML语义化标签；
2. css基本语法；
3. css选择器；
4. css盒子模型；
5. css浮动；
6. css定位;

此项目一共开发五个静态页面，分别是：首页（index.html）篇，风景(view.html)篇，美食(food.html)篇，人物(person.html)篇，联系我们(telephone.html)；

注意:因为每一个页面的header和footer区域内容一致，所以我们只在首页index.css里面添加相关样式，其他页面通过：    <link rel="stylesheet" href="index.css"> 引用即可。

二、项目HTML布局与CSS要点

1.首页篇

效果图展示：

 从图中我们可以看出页面构造主要分四部分：

1.header头部导航栏

2.main主体横幅区域

3.share侧边分享栏（注：分享栏会跟随着页面的移动向上或者向下移动。）

4.footer底部页脚

区域要点概述表

难度	区域	元素	要点
★★	header	img input button ul>li*5>a	1.input提示信息用placeholder，养成良好运用规范标签值习惯，不要用value做提示信息； 2.导航栏不要设置宽度，方便后期增删导航内容；
★	main	p button	1.横幅图片直接给main父盒子添加background
★★★	share	img p	/* 生成固定定位的元素 */     position: fixed;  /* 相对于右边的距离 */   right: 40px;   top: 140px;  /* 控制盒子显示层次，数字越大显示越靠前 */     z-index: 999;
★★	footer	h1 p input img...	分为左右浮动布局

2.风景篇

 从图中我们可以看出页面构造主要分三部分（因为herder和footer与首页一致，此处省略不讲）：

.main主体摄影作品展示区域：可分为

1.photoshow-top上部分（注：鼠标移到图片时会浮现隐藏的字）

鼠标移动到图片浮现白色文字

2.photoshow-bottom下部分

区域要点概述表

难度	区域	元素	要点
★★★	photoshow-top	h1 p img	1.注意规范一个页面h1只用一次，否则造成权重分散 2.字体隐藏 display: none; 点击浮现在鼠标悬停在图片时设置hover：     display: block;
★	photoshow-bottom	h3 img p	注意图片文字居中摆放整齐即可

3.美食篇

 从图中我们可以看出页面构造主要分三部分（因为herder和footer与首页一致，此处省略不讲）：

food食物展示区域：可分为

1.caption标题部分

2.food-show食物秀中间部分（注：鼠标移到图片时会放大美食图片）

鼠标没有移动到图一披萨效果

鼠标移动到披萨图片，图片相应放大效果，可以从图二美食图作参照

3.menu菜单部分

区域要点概述表

难度	区域	元素	要点
★	caption	h1 p	注意文字居中，颜色，字体等即可
★★★	food-show	a img	1.注意效果图有两种尺寸的图片，所以建议给相应添加两种类名，统一更改图片样式 2.图片放大效果在img里面设置过渡（放大）时间：    transition: all 2s; 给图片设置hover属性，鼠标移动到图片时图片放大1.5倍：   transform: scale(1.5); 3.为了防止图片放大倍数后溢出：  overflow: hidden;
★★	menu	h3 img p	1.图片文字居中摆放整齐即可 2.图片设置一个外盒子，填充白色添加属性： border-radius: 50%;使其变成⚪形外框 （图片也要加此属性）

4.人物篇

 从图中我们可以看出页面构造主要分三部分（因为herder和footer与首页一致，此处省略不讲）：

food食物展示区域：可分为

1.person-bt标题部分

1.person-show人物秀中间部分，可分为三个小块（注：鼠标移到展示框（person-show）时会产生tomato颜色的文字阴影）

鼠标移动展示阴影

 

1）person-img

2）person-text

3）person-share

 

区域要点概述表

难度	区域	元素	要点
★	.person-bt	h1 p	注意文字居中，颜色，字体等即可
★★★	person-show	.person-img .person-text .person-share	1.文字阴影在person-show里设置hover鼠标经过时出现框阴影:   box-shadow: tomato 0px 0px 5px 1px; 2.person-share时要把图片放到a标签里面

5.联系我们

  从图中我们可以看出页面构造主要分三部分（因为herder和footer与首页一致，此处省略不讲）：

telephone联系我们展示区域：可分为

1.h2标题部分

1.telephone-list地址图片中间部分，可分为五个小块（注：鼠标移到展示框（telephone-list）时会显示地址的地图）

 

鼠标移到图一，展现地图

 

1）add地址

2）line分割线

3）icon矩形图标

4）add-text文字部分

5）map隐藏的地图图片

区域要点概述表

难度	区域	元素	要点
★	.h2	h2	注意文字居中，颜色，字体等即可
★★★	telephone-list	.add(p) .line(hr) .icon(img) .add-text(p) .map（img）	1.为telephone-list添加一个外盒子形成一个白色的圆角矩形边框 2.map的隐藏与显示   display: none; display: block;

三、感谢阅读

不足之处欢迎私信留言指出交流，谢谢！