网页实战——点点网

本节大纲

  • 点点网实战
  • 知识回顾

课程内容

点点网静态页

第一步:标注、切图

用phptoshop标注间距、字体颜色、背景颜色、宽高 切出图片

第二步: 理解页面

理解什么?

  • 哪些是背景图,哪些是图片
  • 能不能点击,是不是链接
  • 如何分块
  • 图片大小是否固定,版式是否确定
  • ......

第二步:编写html骨干

技巧

  • 大区块用id选择器,细节全用class
  • class命名要有语义,小写,中间用下划线连接
  • 一个元素可用多个class, 把一些元素相同或者类似的特性抽离成一个通用的class

<body>
  <div id="header">
    <div class="layout clearfix">
      <div class="logo">
      </div>
      <div class="about">
      </div>
    </div>
  </div>
  <div id="content">
    <div class="layout clearfix">
      <div class="main">
      </div>
      <div class="aside">
      </div>
    </div>
  </div>
  <div id="footer"></div>
</body>

第三步: 细化内容

头部
  <div class="logo">
    <a href="#" title="点点">
      <img src="images/10-1.png" alt="点点">
    </a>
  </div>
  <div class="about">
    <a href="#" title="关于点点">关于点点</a>
  </div>

区块内容

  <div class="main">
    <!--包裹一次,因为有很多条内容-->
    <div class="item clearfix">
      <div class="item-avater">
        <a href="#"><img src="images/10-8.jpeg"></a>
      </div>
      <div class="item-content">
        <div class="icon-triangle"></div>
        <h4>极致之宿</h4>
        <h3>江西婺源</h3>
        <div class="photos">
            <!--  这里放图片-->
        </div>
        <p>风景</p>
      </div>
    </div>
  </div>

图片区

  <div class="photos">
    <div class="photo-big">
      <a href="#">
        <img src="images/10-4.png">
      </a>
    </div>
    <ul class="photos-small clearfix">
      <li class="first"><a href=""><img src="images/10-2.png"></a></li>
      <li><a href=""><img src="images/10-2.png"></a></li>
      <li><a href=""><img src="images/10-2.png"></a></li>
      <li class="first"><a href=""><img src="images/10-2.png"></a></li>
      <li><a href=""><img src="images/10-2.png"></a></li>
      <li><a href=""><img src="images/10-2.png"></a></li>
    </ul>
  </div>

侧边栏

  <div class="aside">
    <div class="login-info">
      <a class="login button" href="#">登录</a>
      <a class="register button button-stress" href="#">注册</a>
    </div>
    <div class="info-list">
      <ul>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div id="footer">
    </div>
  </div>

侧边栏一个列表

  <li>
    <a href="#">
      <dl>
        <dt><img src="http://m1.img.srcdd.com/farm3/d/2012/0328/11/0BBEA3E9C235CC8D05414A67BB0EC393_S40_40_40.JPEG"></dt>
        <dd class="desp">极致之宿</dd>
        <dd class="title">杰出博客</dd>
      </dl>
    </a>
  </li>

样式

  1. 区块浮动, 如果区块内有浮动元素,要加clearfix
  2. 图像根据情况设置宽度
  3. 其常用样式

font-size: 14px;
color: #ffeeff;
text-align: center;
border: 1px solid red;
border-top: 2px solid #eee;
border-radius: 4px 4px 0 0;
height: 20px;
line-height: 20px;
position: relative;
position: absolute;
top: 0px;
left: -10px;
z-index: 1;
background: url(1.png) 0 0 no-repeat;
background-color: red;
a:hover{}
text-decoration: none;
float: left;
margin-left: 10px;
margin-top: 20px;
margin: 10px 0px 5px 1px;
padding: 10px 3px 4px 0;
opacity: 0.5;

课程回顾

作业安排

作业时间为1周