简书-首页

静态页面

所给成图

一、做网页前的准备
利用火狐浏览器插件屏蔽简书首页的css样式得到图片素材。

屏蔽CSS样式以后的简书首页

二、搭建页面的HTML框架
1.导航栏
ul标签

没有添加CSS的导航栏

2.banner图&右侧栏目导航
直接把图片用<img>标签引入。

3.下方栏目导航
用<img>引入图片，<p>引入文字，然后把对应的图文放在一个<div>中

三、给页面添加CSS样式
1.导航栏
去掉无序列表前面的小圆点，并设置成横向导航栏

li{
  float: left; //横向
  list-style-type:none;//去掉小圆点
  }

给导航栏添加下边框线

ul{
   border-bottom: 1px solid #EEE; 
  }

给导航栏的文字设置样式

li a {
            display: block;
            color: black;
            text-align: center;
            padding: 16px 16px;
            text-decoration: none;
            font-size: 17px;
        }   

设置文字块背景色（鼠标放在上面变成灰色）

li a:hover {
            background-color: #EEE;
        }

2.banner图
给banner图设置大小并定位，并把尖角改成圆角

#banar{   
            margin-top: 80px;
            margin-left: 90px;//定位
            width: 700px;
            height: 350px;//大小
            border-radius: 10px; //把尖角改成圆角
            border: 1px solid #EEE;//设置边框
        }

3.右侧栏目导航
把五张图片和包含二维码的文字框放入同一个<div>中，给<div>定位，使图片组和bannar处于同一个水平高度。

 #div{
        margin-top: -355px;
        margin-left: 850px;
    }

设置图片的大小。

4.下方栏目导航
设置图片的大小，通过定位实现<div>同行排列，文字所在的<p>标签再<div>中垂直居中。

效果图

四、用bootstrap再实现一遍这个页面的效果
正在做，现在已经配置好了应用bootstrap需要用到的环境，也准备好了一个没有任何样式的HTML框架。

暂时还没有实现的DOM操作

1.鼠标放在消息一栏出线下拉列表

DOM1

2.光标在搜索框时搜索框变长

DOM2

3.鼠标放在头像上时出现下拉列表

DOM3

4.鼠标放在二维码上时二维码放大显

DOM4

5.轮播图
记得寒假时刚开始做简述首页的时候，最中间还有轮播图（就是我做的banar图的位置），然鹅，现在也没有了，所以……其实我也没打算实现。

我的感悟

从寒假作业发出来到现在，三四个月了，我终于完成了它……
积极废人，这大概是我本人了。
介个是我的静态页面的预览地址，欢迎大家题出意见~~~