zoukankan      html  css  js  c++  java

  • html+css第三篇

    css reset 原则：
但凡是浏览默认的样式，都不要使用。
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
块的特征
    1、默认独占一行 
    2、没有宽度时，默认撑满一排
    3、支持所有css命令
内嵌(内联、行内)的特征
    1、同排可以继续跟同类的标签
    2、内容撑开宽度
    3、不支持宽高
    4、不支持上下的margin和padding
    5、代码换行被解析
display：block        显示为块

使内联元素具备块属性标签的特性


display：inline        显示为内嵌

使行块属性标签具备内联元素的特性
Inline-block的特点和问题

特性：
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度

问题：
1、代码换行被解析；
2、ie6 ie7 不支持块属性标签的inline-block;

a、分析结构（div 包一排a）
b、a标签支持宽高，并且在一排显示
c、有hover效果
d、当前状态不能点！

cursor 指针样式 （规定要显示的光标的类型）
cursor：pointer | text | move ……
cursor:url(hand.cur),pointer;
前端规范
1、所有书写均在英文半角状态下的小写；
2、id，class必须以字母开头；
3、所有标签必须闭合；
4、html标签用tab键缩进；
5、属性值必须带引号；
6、<!-- html注释 -->
7、/* css注释 */
8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
9、p,dt,h标签  里面不能嵌套块属性标签；
10、a标签不能嵌套a；
11、内联元素不能嵌套块；

     day01-常见标签

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* 默认样式重置 (css reset)  */

</style>
</head>
<body>

<a href="#">a标签（链接，下载，锚点）</a>
<img src="1.png" alt=""/>
<a href="#"><img src="1.png" alt=""/></a>
<span>区分样式</span>
<strong>强调（粗体）</strong>
<em>强调（斜体）</em>
<!-- 
内联，内嵌，行内属性标签：
1、默认同行可以继续跟同类型标签；

块属性标签：
1、默认独占一行显示；
 -->
<p>段落</p>
<div>块</div>
<h1>标题1</h1>
<h6>标题6</h6>
<ol>
    <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>
<ul>
    <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>
<dl>
    <dt>定义列表标题</dt>
  <dd>定义列表项</dd>
  <dd>定义列表项</dd>
  <dd>定义列表项</dd>
</dl>

</body>
</html>

    day02-常见标签-默认样式重置

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* 默认样式重置 (css reset)  */

</style>
</head>
<body>

<a href="#">a标签（链接，下载，锚点）</a>
<img src="1.png" alt=""/>
<a href="#"><img src="1.png" alt=""/></a>
<span>区分样式</span>
<strong>强调（粗体）</strong>
<em>强调（斜体）</em>

<p>段落</p>
<div>块</div>
<h1>标题1</h1>
<h6>标题6</h6>
<ol>
    <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>
<ul>
    <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>
<dl>
    <dt>定义列表标题</dt>
  <dd>定义列表项</dd>
  <dd>定义列表项</dd>
  <dd>定义列表项</dd>
</dl>

</body>
</html>

    day03-块和内嵌

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* 默认样式重置 (css reset)  */

</style>
</head>
<body>

<a href="#">a标签（链接，下载，锚点）</a>
<img src="1.png" alt=""/>
<a href="#"><img src="1.png" alt=""/></a>
<span>区分样式</span>
<strong>强调（粗体）</strong>
<em>强调（斜体）</em>
<!-- 
内联，内嵌，行内属性标签：
1、默认同行可以继续跟同类型标签；

块属性标签：
1、默认独占一行显示；
 -->
<p>段落</p>
<div>块</div>
<h1>标题1</h1>
<h6>标题6</h6>
<ol>
    <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>
<ul>
    <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>
<dl>
    <dt>定义列表标题</dt>
  <dd>定义列表项</dd>
  <dd>定义列表项</dd>
  <dd>定义列表项</dd>
</dl>

</body>
</html>

    -块和内嵌特性

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* 默认样式重置 (css reset)  */
/*
内联，内嵌，行内属性标签：
    1、默认同行可以继续跟同类型标签；
    2、内容撑开宽度
    3、不支持宽高
    4、不支持上下的margin和padding
    5、代码换行被解析
    
块属性标签：
    1、默认独占一行显示；
    2、没有宽度时，默认撑满一排
     3、支持所有css命令
 */
 span,div{background:blue; 100px; height:100px;}


</style>
</head>
<body>

<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>

<div>块</div>
<div>块</div>



</body>
</html>

    块和内嵌转换

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* 默认样式重置 (css reset)  */

span,div{background:blue; 100px; height:100px;}
span{display:block;}
div{display:inline;}
/* 
display:block;  显示为块
display:inline;  显示为内嵌
 */

</style>
</head>
<body>

<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>

<div>块</div>
<div>块</div>



</body>
</html>

    翻页

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* 默认样式重置 (css reset)  */

.pages{ height:60px; background:#e8e8e8; 600px; margin:90px auto; text-align:center;}
.pages a{ background:#fff; border:1px solid #cdcdcd;color:#333333; padding:0 8px 0 9px; height:28px; line-height:28px; display:inline-block;}
.pages a:hover{border-color:red;color:red;}
.pages .active{ font-weight:bold; background:#fcf9ea;cursor:text;}
.pages .active:hover{border-color:#cdcdcd;color:#333333;}

body{height:1500px; cursor:url(hand.cur),pointer;}

</style>
</head>
<body>


<div class="pages">
    <a href="#">上一页</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#" class="active">3</a>
  <a href="#">4</a>
  <a href="#">15</a>
  <a href="#">211</a>
  <a href="#">255…</a>
  <a href="#">下一页</a>
</div>



</body>
</html>

    效果 
  • 相关阅读:
    斐波那契数列
    MySQL
    GIT
    shell执行Python并传参
    摘选改善Python程序的91个建议2
    摘选改善Python程序的91个建议
    django执行原生sql
    admin
    分支&循环
    git
  • 原文地址：https://www.cnblogs.com/q1359720840/p/10416169.html
Copyright © 2011-2022 走看看