CSS实战（制作京东简易首页）

来源：互联网发布：淘宝客卖家怎么推广编辑：程序博客网时间：2024/05/29 09:17

项目文件夹（站点）

我们的网页都应该放到一个文件夹内。站点-本地站点

规划好页面

项目文件夹

1 .首页 index.html
2 .样式 css文件夹 css文件相同样式（全局样式公共样式） Base.css（基本样式） global.css (全局样式)
3.图片 images 文件
4.特效 js文件夹 js 文件

1.4.2 CSS初始化

@charset "UTF-8";/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }ul, ol { list-style:none; }input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}select, input { vertical-align:middle; }select, input, textarea { font-size:12px; margin:0; }textarea { resize:none; } /*防止拖动*/img {border:0; vertical-align:middle; }  /*  去掉图片低测默认的3像素空白缝隙*/table { border-collapse:collapse; }body {    font:12px/150% Arial,Verdana,"\5b8b\4f53";    color:#666;    background:#fff}.clearfix:before,.clearfix:after{    content:"";    display:table;}.clearfix:after{clear:both;}.clearfix{    *zoom:1;/*IE/7/6*/}a{color:#666; text-decoration:none; }a:hover{color:#C81623;}h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;font-size:100%;}s,i,em{font-style:normal;text-decoration:none;}.col-red{color: #C81623!important;}/*公共类*/.w {  /*版心 提取 */    width: 1210px;margin:0 auto;}.fl {    float:left}.fr {    float:right}.al {    text-align:left}.ac {    text-align:center}.ar {    text-align:right}.hide {    display:none}

引入css

    <!-- 引入base.css -->    <link rel="stylesheet" href="css/base.css" />    <!-- 引入index.css -->    <link rel="stylesheet" href="css/index.css" />

Favicon 图标

<link rel="shortcut icon" href="favicon.ico" />

网页显示的图标

CSS 位置分类

行内式 css

<div class="fr" style="color:red;">aa</div>

内嵌式样式

<style>    .one {        width: 200px;    }</style>

外链式

<link rel=”stylesheet” href =”css/base.css” />

Font 字体综合写

Font: 字体加粗字号/行高字体; 必须有字号和字体。

Font-weight:bold; 700

S del 删除线
I em 倾斜
U ins 下划线
字体加粗 font-weight: 700;
让字体不加粗: font-weight:normal;
字体倾斜: font-style:italic; 不用
字体不倾斜： font-style:normal;
没有下划线没有删除线: text-decoration: none;

定位： position：static; 静态定位约等于标准流
浮动的不浮动: float:none; none left right
定位的不定位: position: static; absolute relative fixed

权重–标签 1 类 10 id 100 行内 1000
网页稳定：
Width 和height 最稳定
其次padding
最后才考虑margin

浮动(float)

正常流 normal flow

浮动定位脱标 out of flow
浮动目的：

可以让多个块级元素放到一行上。
Float: left right none;

清除浮动

清除浮动：根据情况需要来清楚浮动。

清除浮动的目的：就是为了解决父盒子高度为0 的问题。
清除浮动：
1. 额外标签法
2. Overflow: hidden 触发 bfc 模式就不用清楚浮动
3. 伪元素

 .clearfix:after {          content:””;          Visibility:hidden;            Display:block;           Height:0;          Clear:both;     }    .clearfix{      Zoom:1;}

清除浮动：真正的叫法 闭合浮动
4. 双伪元素

.clearfix:before,.clearfix:after{    display: table;    content: "";}.clearfix:after {    clear: both;}.clearfix {    zoom: 1;}

鼠标样式

Cursor: pointer    鼠标变成小手  Cursor: default;   小白 Cursor : move;     移动  Cursor : text ;    文本输入

网页布局：
给一个盒子：宽度高度背景边框位置

Border-radius

圆角矩形

border-radius: 7px 7px 7px 0;border-radius: 左上 右上  右下 左下；  顺时针

标签嵌套

块级元素 — 任何元素可以的。
行内元素 – 行内元素只嵌套元素 b u span i s
P 不能放 div 。
a 无所不能。 a里面不能放 a input 等

Z-index 层级 div 层

只有定位的盒子（除了static）才有 z-index
如果都是定位绝对定位他们默认的z-index 是 0
最后的一个靠上

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>       /* .test {            width: 150px;            height: 300px;            border: 1px solid #ccc;            margin-top: 100px;            float: left;            margin-left: -1px;        }        .test:hover {            border: 1px solid #f40;            position: relative;        } */        .test {            width: 150px;            height: 300px;            border: 1px solid #ccc;            margin-top: 100px;            float: left;            margin-left: -1px;            position: relative;        }        .test:hover {            border: 1px solid #f40;            z-index: 1;        }    </style></head><body><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div></body></html>

背景半透明

CSS3
background: rgba(0,0,0,0.5);

Opacity: 0.5; 让盒子半透明里面的内容也半透明

阅读全文

0 0