一、设置整体页面宽度

一般写个样式命名为.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. eclipse导出文件上传服务器

    [1]导出     选择项目    文件导出 输入导出路径如f盘ftp文件夹下 [2]利用scr上传服务器工具 上传到 home/tomcat/app/项目名称/ 不导入upload文件 [待完善]

  2. Python sh库学习

    官方文档有句话"allows you to call any program",并且: helps you write shell scripts in Python by giv ...

  3. Android中Activity的LauchMode(加载模式)

    1.standard模式:一个task有多个Activity,一个Activity可以被实例化多次,可以放在不同的task中. 2.singleTop模式:该Activity在栈顶,同时收到启动该Ac ...

  4. Mac 及 Xcode快捷键

    mac快捷键: 窗口最大化:control+command+F 窗口最小化:command+M 关闭当前:    command+W 退出程序:    command+Q Safari往下翻页:空格 ...

  5. 配置linux下面python的开发环境

    1.首先安装Python开发环境 http://blog.csdn.net/testcs_dn/article/details/51253365 2.安装django开发环境 http://blog. ...

  6. 11g R2 rac linstener 监听配置

    两个节点host,ipvip ,scan的信息 #eth0-Public IP 162.12.0.1    cqltjcpt1 162.12.0.3    cqltjcpt2 #eth1 PRIVAT ...

  7. Oracle Database 12.2新特性详解

    在2015年旧金山的Oracle OpenWorld大会上,Oracle发布了Database 12.2的Beta版本,虽然Beta版本只对部分用户开放,但是大会上已经公布了12.2的很多重要的新特性 ...

  8. Linux 简单按键中断处理流程

    中断处理程序中不能延时.休眠之类的,一定要最快速.高效的执行完. // 功能:申请中断 // 参数1:中断号码,通过宏 IRA_EINT(x) 获取 // 参数2:中断的处理函数,填函数名 // 参数 ...

  9. linux中标准输出相关

    linux标准输出相关 http://blog.sina.com.cn/s/blog_5e99b41e0100tjtx.html

  10. emqtt 4 (我要publish消息了)

    这次,分析处理publish msg的流程. 由protocol开始 publish 类型的packet的处理是: process(Packet = ?PUBLISH_PACKET(_Qos, Top ...