CSS--抽屉（dig.chouti.com）页面

一、设置整体页面宽度

一般写个样式命名为.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样式就完美了。?

来自为知笔记(Wiz)

时间： 2024-10-31 22:19:51

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

CSS让footer保持在页面底部

序:当希望将footer保持在页面底部(即使页面内容高度低于窗口高度),可以尝试下面的方法.. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS让footer保持在页面底部</title> <style type="text/css"> * { margin:

css做的后台管理页面，不考虑ie8一下的

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>盒子模型</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; width:100%; overflow:hidden; } .wrap { he

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

学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63B6dBAUoDd6tpHFgESQ 密码:lwc5 总结写前端时的不足: css很多属性名记不住,经常需要去查笔记 类名命名不是很规范 没有充分利用css类的特性 整个页面布局像是东拼西凑出来的(虽然拼凑的挺不错) 暂时还没实现页面的动态效果,比如说轮播图,选项卡,鼠标放在某个a标签上的动态效果(

html&amp;css实现简单的注册页面

使用HTML实现注册页面 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <form action="#" method="post"> <table bor

巧妙使用CSS创建可以打印的页面

用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <link href="css/admin.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/admin-print.c

css 导航，菜单对应页面切换效果实现方法

实现原理: 每个菜单有多个li标签,每个li标签含一个id,li标签的id用来标记:点击效果 每个页面有一个id,这个id的作用是对应每个li标签的点击链接对应的页面,它的作用是用来标记:li标签的href指向页面位置 li标签的href的指向,通过伪类target指向唯一的页面id: #app-version:target,如果不打算有点击效果,可以在兄弟选择符 ~ 后跟当前 li 标签的 id;如果想要有点击效果,则要在兄弟选择符 ~ 后跟当前li标签的所有父节点 css: /*点击菜单,选

小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下p

CSS垂直翻转/水平翻转提高web页面资源重用性——张鑫旭

一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy

CSS垂直翻转/水平翻转提高web页面资源重用性

原文:www.zhangxiyu 一.CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; }