一、设置整体页面宽度

一般写个样式命名为.d{}设置整体页面指定宽度和居中，京东命名为.w{}，bootstrap里命名为.container{}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0 auto;
        }
        .header{
            height: 48px;
            background-color: red;
        }
        .body{
            background-color: aliceblue;
        }
        .foot{
            background-color: blue;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="w">     <!-- 在div里设置这个样式 -->
            头部内容
        </div>
    </div>
    <div class="body">
        <div class="w">     <!-- 在div里设置这个样式 -->
            <a>主体内容</a>
        </div>
    </div>
    <div class="foot">
        <div class="w">     <!-- 在div里设置这个样式 -->
            页脚内容
        </div>
    </div>
</body>
</html>

二、a标签

1、鼠标放上去是小手，不是竖杠

1
<a style="cursor: pointer">内容</a>

2、鼠标放上去不要下划线

1
<a style="text-decoration: none">内容</a>

三、圆角

图片或者button等，设置圆润程度：border-radius属性，50%就是个圆形了；

1
<img src="img/pp.jpg" style="border-radius: 10px;">

四、伪类和伪元素

1、伪类

CSS伪类用于向某些选择器添加特殊的效果。

鼠标放在任意标签上变色，以a标签为例：
1
2
3
4
5
6
7
8
.body .w a:hover{
    background-color: green;
}
<div class="body">
    <div class="w"> 
        <a style="">内容</a>
    </div>
</div>

2、伪元素

伪元素用于将特殊的效果添加到某些选择器。

最常用的是：after

举例：clearfix

在div里有两个小div，float：left之后，会把最外层的div背景色覆盖掉，以前的解决办法是在最后加入一个div，样式是clear：both；换成新的样式clearfix，在：after里追加一些内容，隐藏起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .clearfix:after{
            content: '.';
            visibility: hidden;
            display: block;
            height: 0;
            clear: both;
        }
</style>
<div class="clearfix">
    <div style="float: left">往左飘2</div>
    <div style="float: left">往左飘2</div>
</div>

以后遇到float布局时，只添加clearfix样式就完美了。​

CSS--抽屉（dig.chouti.com）页面的更多相关文章

  1. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

  2. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  3. html+css实现小米商城首页静态页面

    学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63 ...

  4. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  5. js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等，应注意

    js  和 css 中 不能使用 jsp  页面中一些 标签 和 java 代码等,应注意 如 ${ }  <%%>  等

  6. css背景精华所在+前端页面开发流程

    background属性 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  7. 前端设计的常用属性，CSS的盒模型，页面布局的利器

    在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...

  8. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  9. CSS的基本语法及页面引用

    CSS的基本语法及页面引用 CSS基本语法 CSS的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个 ...

随机推荐

  1. 怎么用HD Tune检测硬盘坏道

    HD Tune软件不仅小巧而且很易使用,是一款检测电脑硬盘的优良工具.不仅是电脑硬盘,包括移动硬盘在内一样可以检测.那么,如何使用HD Tune呢?如何使用HD Tune检测磁盘坏道呢? 工具/原料 ...

  2. Python错误TypeError: write() argument must be str, not bytes

    2016-07-03 20:51:25 今天使用Python中的pickle存储的时候出现了以下错误: TypeError: write() argument must be str, not byt ...

  3. 串口通信（C#实践）

    最近在做一个和智能硬件设备(数字焊接电源)通信的应用软件.和各设备之间通信使用的是串口或网络(Socket)的方式. 理论 串口通信,.NET 里提供了专门操作串口的类 System.IO.Ports ...

  4. #510. 「LibreOJ NOI Round #1」动态几何问题

    题目: 题解: 几何部分,先证明一下 \(KX = \sqrt{a},YL = \sqrt{b}\) 设左侧的圆心为 \(O\) ,连接 \(OK\) ,我们有 \(OK = r\). 然后有 \(r ...

  5. 17.Selenium+Python日期控件小案例

    1.web上的控件种类十分多,但是大致分为2种,一种为类型是input的且可以输入,第二种为类型是input的且属性为readonly,文本框不可编辑 2.第一种类型为可以输入的,直接send_key ...

  6. 表空间 -- tablespace

    表空间是数据库的逻辑划分,一个表空间只能属于一个数据库.所有的数据库对象都存放在指定的表空间中.但主要存放的是表, 所以称作表空间. Oracle数据库中至少存在一个表空间,即SYSTEM的表空间. ...

  7. microtime() 测试代码执行时间，提高编码效率

    <?php $b_time = microtime(true); $a = array("); $count = ; foreach ($a as $key => $value) ...

  8. 《PHP对象、模式与实践》之高级特性

    高级特性包括:1.静态方法和属性(通过类而不是对象来访问数据和功能)2.抽象类和接口(设计,实现分离)3.错误处理(异常)4.Final类和方法(限制继承)5.拦截器(自动委托)6.析构方法(对象销毁 ...

  9. 屏蔽sql server 2008的智能提示

    1. 去掉这个勾 2. 如果你安装了Sql complete, 接着下面的

  10. JavaScript笔记——DOM的操作

    节点及其类型 在JavaScript中,节点分为三种: 元素节点:HTML标签元素. 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在什么 ...