你的位置:首页 > 软件开发 > 网页设计 > CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

发布时间:2016-11-23 16:00:07
web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用,有点& ...

web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控制的,就不应该使用HTML标签完成,如果CSS能解决的问题尽量不要用JavaScript完成。

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

一、CSS3概要

CSS(Cascading Style Sheet)是层叠样式表的意思,CSS3就是在CSS2.1的基础上升级的CSS新版本,属于HTML5的一部分。它可以有效地对页面的布局、字体、颜色、背景、动画和其它效果实现。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

1.1、特点

1.2、效果演示

纯CSS3画出小黄人并实现动画效果

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

HTML页面:

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>drawLittleHuang</title>  <link rel="stylesheet" type="text/css" href="drawLittleHuang.css"></head><body>  <div class="wrapper"><!-- 容器 -->    <div class="littleH"><!-- 小黄人 -->      <div class="bodyH"><!-- 身体 -->        <div class="trousers"><!-- 裤子 -->          <div class="condoleBelt"><!-- 吊带 -->            <div class="left"></div>            <div class="right"></div>          </div>          <div class="trousers_top"></div><!-- 裤子突出的矩形部分 -->          <div class="pocket"></div><!-- 裤袋 -->          <!-- 三条线 -->          <span class="line_left"></span>          <span class="line_right"></span>          <span class="line_bottom"></span>        </div>      </div>      <div class="hair"><!-- 头发 -->        <span class="left_hair_one"></span>        <span class="left_hair_two"></span>      </div>      <div class="eyes"><!-- 眼睛 -->        <div class="leftEye"><!-- 左眼 -->          <div class="left_blackEye">            <div class="left_white"></div>          </div>        </div>        <div class="rightEye"><!-- 右眼 -->          <div class="right_blackEye">            <div class="right_white"></div>          </div>        </div>      </div>      <div class="mouse"><!-- 嘴巴 -->        <div class="mouse_shape"></div>      </div>      <div class="hands"><!-- 双手 -->        <div class="leftHand"></div>        <div class="rightHand"></div>      </div>      <div class="feet"><!-- 双脚 -->        <div class="left_foot"></div>        <div class="right_foot"></div>      </div>      <div class="groundShadow"></div><!-- 脚底阴影 -->    </div>  </div></body></html>

原标题:CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。