一、设置整体页面宽度

一般写个样式命名为.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. 51nod 1089 最长回文子串 V2（Manacher算法）

    回文串是指aba.abba.cccbccc.aaaa这种左右对称的字符串. 输入一个字符串Str,输出Str里最长回文子串的长度. 收起   输入 输入Str(Str的长度 <= 100000) ...

  2. (转)Android高性能编程(2)--延迟初始化

    上一篇文章,讲到了很多Android应用开发中需要注意的性能和内存方面的技巧.这一篇文章就是从smali指令级来分析性能优化和内存优化的问题. 如何解决界面启动时间开销大的问题 我们在编写Androi ...

  3. 选择排序的JavaScript实现

    思想 原址比较的排序算法.即首先找到数结构中的最小值并将其放置在第一位,然后找到第二小的值将其放置在第二位...以此类推. 代码 function selectionSort(arr) { const ...

  4. 随时查找中位数——pat1057

    http://pat.zju.edu.cn/contests/pat-a-practise/1057 题目的意思是可以在一个可以任意添加于删除整数的集合里随时查找该集合的中位数 每次查找用nlogn的 ...

  5. DSP SYS/BIOS开发

    https://blog.csdn.net/lg1259156776/article/details/80695318

  6. 【转】Jmeter和LR上传文件和下载

    背景: 在某个申请业务中,需要上传附件文件,然后才能提交该申请 遇到的问题: 1,  在使用Jmeter或者LR进行录制时,无法录制到上传文件的请求,只能通过Fiddler能查看到该请求 2,  因为 ...

  7. Java-Maven-Runoob：Maven 项目文档

    ylbtech-Java-Maven-Runoob:Maven 项目文档 1.返回顶部 1. Maven 项目文档 本章节我们主要学习如何创建 Maven 项目文档. 比如我们在 C:/MVN 目录下 ...

  8. AngularJS：Http

    ylbtech-AngularJS:Http 1.返回顶部 1. AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 使 ...

  9. Vue.js：安装

    ylbtech-Vue.js:安装 1.返回顶部 1. Vue.js 安装 1.独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入 ...

  10. Oracle日常性能问题查看

    1 判断回滚段竞争的sql --当Ratio大于2时存在回滚段竞争,需要增加更多的回滚段) ratio from v$rollstat rs, v$rollname rn where rs.USN = ...