一、设置整体页面宽度

一般写个样式命名为.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. bzoj 3052 糖果公园

    Written with StackEdit. Description \(Candyland\) 有一座糖果公园,公园里不仅有美丽的风景.好玩的游乐项目,还有许多免费糖果的发放点,这引来了许多贪吃的 ...

  2. VC++ windows开机自启动设置

    设置开机启动 很多软件要求软件能够在开机时自启动,下面讲讲如何设置开机自启动. Windows设置程序的开机启动的方法有很多,这里只讲其中的一种,该方法同时适用于32位和64位的操作系统,只需将需要开 ...

  3. LeetCode Minimum Time Difference

    原题链接在这里:https://leetcode.com/problems/minimum-time-difference/description/ 题目: Given a list of 24-ho ...

  4. .NET程序如何启动？

    .net程序如何启动? .NET Framework在Windows平台顶部运行,这意味着.NET Framework必须使用 windows可以理解的技术来构建.首先,所有托管模块和程序集文件都必须 ...

  5. Kreyos 资料收集

    Kreyos 资料收集 使用 默认需要连接 APP 解锁. 固件 https://github.com/kreyosopensource/KreyosFirmware Android 源码 https ...

  6. 一个detect问题引发的一系列思考

    在用BoneCP的时候,发现一个JVM日志中报了一个异常,大意是“探测(detect)到有数据库链接没有关闭”(不得不说JVM的强大),但是我用的是连接池里面的链接啊,怎么会需要关闭呢? 有问题首先找 ...

  7. 第21篇 ubuntu安装ftp服务器（转载）

    ubuntu安装ftp服务器 1: 安装vsftpd ~$ sudo apt-get install vsftpd ubuntu10.10自己装了,这步省略. 2: 配置vsftpd 2.1 修改vs ...

  8. Rest之路 - 第一个Rest程序

    在 Eclipse 里新建一个 Dynamic project 将 Jersey 的 jar 包,拷贝到 WebContent -> WEB-INF -> lib 文件夹 Add jars ...

  9. PHP字符串的处理(三)-字符串的输出

    1.echo() echo()实际不是一个函数,是一个语言结构,不需要使用括号 <?php $str = "test"; echo $str."<br> ...

  10. EF中新建表和关联表的方法

    以机场表为例 private static AIRPORT_HELIPORTManager AirportHeliportManager => ManagerFactory.Instance.A ...