CSS入门学习笔记
<p>CSS入门学习笔记<br>一、CSS简介<br>1、什么是CSS？<br>2、为什么使用CSS？<br>3、CSS的作用<br>二、CSS语法<br>1、CSS基础语法<br>2、CSS注释语法<br>3、CSS应用方法<br>三、CSS选择器<br>1、元素选择器<br>2、类选择器<br>3、ID选择器<br>4、组合选择器<br>5、后代选择器<br>6、子元素选择器<br>7、兄弟选择器<br>8、全局选择器<br>9、伪类选择器<br>10、选择器优先级<br>四、CSS常用属性<br>1、字体属性<br>2、文本属性<br>3、列表属性<br>4、表格属性<br>5、背景属性<br>6、对齐方式<br>7、盒子模型<br>五、CSS定位<br>1、`static`定位<br>2、`fixed` 定位<br>3、`relative` 定位<br>4、`absolute` 定位<br>5、`sticky` 定位<br>6、重叠的元素<br>六、CSS浮动<br>1、什么是 CSS Float（浮动）？<br>2、元素怎样浮动<br>3、彼此相邻的浮动元素<br>4、清除浮动 - 使用 clear<br>七、CSS网页布局<br>1、网页布局<br>2、头部区域<br>3、菜单导航区域<br>4、内容区域<br>5、底部区域<br>6、响应式网页布局</p><p> </p>
<h2>一、CSS简介</h2>
<h3>1、什么是CSS？</h3>
<ul>
<li>CSS 指的是层叠样式表 (Cascading Style Sheets)</li>
<li>CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素</li>
</ul>
<h3>2、为什么使用CSS？</h3>
<ul>
<li>层叠样式复用，便于后期维护和修改</li>
<li>可控制内容与样式的布局，让页面更精美</li>
</ul>
<h3>3、CSS的作用</h3>
<ul>
<li>对网页的布局、颜色、背景、宽度、高度、字体进行控制</li>
<li>用于布局和定位，设置页面的外观样式，让页面更精美</li>
</ul>
<h2>二、CSS语法</h2>
<h3>1、CSS基础语法</h3>
<p>CSS由选择器和声明块组成：</p>
<p>h1.class1 {<br>text-align: center;<br>color: red;<br>}</p>
<ul>
<li>
<p>语法如下：</p>
</li>
</ul>
<p><head><br> <style><br> 选择器{<br> 属性名：属性值;<br> 属性名：属性值;<br> }<br> </style><br></head></p>
<p> </p>
<ul>
<li>实例：所有<code><p></code>元素都将居中对齐，并带有红色文本颜色：</li>
</ul>
<p><head><br> <style><br> p {<br> color: red;<br> text-align: center;<br> }<br> </style><br></head></p>
<ul>
<li><code>color </code>是属性，<code>red</code> 是属性值</li>
<li><code>text-align</code> 是属性，<code>center</code>是属性值</li>
<li><code>p</code> 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<code><p></code>）</li>
</ul>
<h3>2、CSS注释语法</h3>
<p>CSS注释：<code>/* 注释内容 */</code></p>
<ul>
<li>实例：</li>
</ul>
<p>/* body定义 */ <br>body{ text-align:center; margin:0 auto;} </p>
<ul>
<li>CSS注释：对代码进行解释说明，便于后期维护和修改</li>
</ul>
<h3>3、CSS应用方法</h3>
<ul>
<ul>
<li>内嵌样式：<br>在页面头部通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用</li>
</ul>
</ul>
<p><!doctype html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>CSS语法</title><br> <style><br> p{<br> font-size:12px; /*字号*/<br> color:blue; /*文字颜色*/<br> font-weight:bold;/*加粗*/<br> }<br> </style><br></head><br><body><br> <p>天使投资指早期投资，尤其指个人早期投资。</p><br> <p>VC，Venture Capital，所谓风险投资、创业投资，是相对靠前的非公开市场股权投资。</p><br> <p>PE, Private Equity,所谓私募资本、非公开市场资本，既是私募股权投资的统称，又特指相对靠后的股权投资。</p><br></body><br></html></p>
<ul>
<ul>
<li>行内样式：<br>在HTML标签内定义style属性，只对设置style属性的标签起作用</li>
</ul>
</ul>
<p><!DOCTYPE HTML><br><html></p>
<p><head><br> <meta charset="UTF-8"><br> <title>行内样式</title><br></head></p>
<p><body><br> <!-- 行内样式，仅对当前p元素起作用 --><br> <p style="font-size:12px;color:blue;font-weight:bold;"><br> 天使投资指早期投资，尤其指个人早期投资。<br> </p><br> <!--下面p元素不受影响 --><br> <p>VC，Venture Capital，所谓风险投资、创业投资，是相对靠前的非公开市场股权投资。</p><br></body></p>
<p></html></p>
<ul>
<ul>
<li>外部样式<br>单独定义一个<code>.CSS </code>文件，然后在页面中使用 <code>link标签</code> 或 <code>@import指令</code> 导入<code>html</code>文件里面</li>
<li>使用<code>link标签</code> 链接外部样式</li>
</ul>
</ul>
<p><link rel="stylesheet" href="CSS文件路径" type="text/css" /></p>
<ul>
<li>使用<code>@import 指令</code> 导入外部样式</li>
</ul>
<p><style><br> @import "CSS文件路径";<br> @import url(CSS文件路径);<br></style></p>
<h2>三、CSS选择器</h2>
<h3>1、元素选择器</h3>
<ul>
<li>使用HTML标签作为选择器的名称，也称为标签选择器</li>
</ul>
<p><!doctype html><br><html lang="en"></p>
<p><head><br><meta charset="UTF-8"><br><title>Document</title><br><style type="text/css"><br> p {<br> font-size: 16px;<br> color: red;<br> }<br> <br> h1 {<br> font-size: 20px;<br> color: blue;<br> }<br></style><br></head></p>
<p><body><br><h1>标题</h1><br><p>正文的段落</p><br></body></p>
<p></html></p>
<h3>2、类选择器</h3>
<ul>
<li>使用自定义的名称，以 <code>. </code>号作为前缀，通过HTML标签的<code>class</code>属性调用类选择器</li>
</ul>
<p><!DOCTYPE html><br><html lang="en"></p>
<p><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <style><br> .big {<br> font-size: 40px;<br> }<br> .color {<br> color: blue;<br> }<br> </style><br></head></p>
<p><body><br> <p class="big">HTML</p><br> <p>超文本标记语言</p><br> <p class="big color">CSS</p><br> <p>层叠样式表</p><br></body></p>
<p></html></p>
<p> </p>
<ul>
<li>类选择器名称不能以 <code>数字</code> 开头</li>
<li>调用时不能添加<code>.</code>号</li>
<li>同时调用多个类选择器时，以<code> 空格</code> 分隔</li>
</ul>
<h3>3、ID选择器</h3>
<ul>
<li>使用自定义名称，以<code>#</code>作为前缀，通过HTML标签的<code>id</code>属性进行名称匹配</li>
</ul>
<p><!doctype html><br><html lang="en"></p>
<p><head><br><meta charset="UTF-8"><br><title>id选择器</title><br><style type="text/css"><br> #center {<br> text-align: center;<br> }<br> #left {<br> text-align: left;<br> }<br></style><br></head></p>
<p><body><br><div id="center"><br> <p>前端技术构成</p><br></div><br><div id="left"><br> <p>前端技术构成</p><br></div><br></body></p>
<p></html></p>
<p> </p>
<h3>4、组合选择器</h3>
<ul>
<li>将多个具有相同样式的选择器放在一起声明，使用逗号隔开</li>
<li>注意：使用<code>空格</code>时不区分父子还是后代，使用CSS3中新增的 <code>></code> 时必须是父子关系</li>
</ul>
<p><!doctype html><br><html lang="en"><br><head><br> <meta charset="UTF-8" /><br> <title>派生选择器</title><br> <style type="text/css"><br> h1,p {<br> color: blue;<br> }<br> </style><br></head><br><body><br> <h1>Web前端技术</h1><br> <p>HTML</p> <br> <p>CSS</p><br></body><br></html></p>
<p> </p>
<h3>5、后代选择器</h3>
<ul>
<li>在某个选择器内部再设置选择器，通过空格隔开</li>
<li>下面为实例，当p和strong嵌套使用时起样式效果</li>
</ul>
<p><!doctype html><br><html lang="en"></p>
<p><head><br> <meta charset="UTF-8"><br> <title>后代选择器</title><br> <style><br> p strong {<br> color: blue;<br> }<br> </style><br></head></p>
<p><body><br> <!-- “天使投资”蓝色显示 --><br> <p><strong>天使投资</strong>是投资方式的一种</p><br> <!-- “投资”蓝色显示 --><br> <p><em>天使<strong>投资</strong></em>是投资方式的一种</p><br> <em>em是定义强调文本的标签</em><br> <!-- em 斜体强调 --><br></body></p>
<p></html></p>
<p> </p>
<h3>6、子元素选择器</h3>
<ul>
<li>注意：使用CSS3中新增的 <code>></code> 时必须是父子关系</li>
<li>下面为实例，<code>p</code>的直接子元素<code>strong</code>被设置</li>
</ul>
<p><!doctype html><br><html lang="en"></p>
<p><head><br> <meta charset="UTF-8"><br> <title>子元素选择器</title><br> <style><br> /*子元素选择器：p的直接子元素strong被设置*/<br> p>strong {<br> color: blue;<br> }<br> </style><br></head></p>
<p><body><br> <!-- “天使投资”蓝色显示 --><br> <p><strong>天使投资</strong>是投资方式的一种</p><br> <!-- “投资”黑色显示 --><br> <p><em>天使<strong>投资</strong></em>是投资方式的一种</p><br></body></p>
<p></html></p>
<p> </p>
<h3>7、兄弟选择器</h3>
<ul>
<li>元素1+元素2</li>
<li>下面为实例，当<code>h2</code>和<code>p</code>标签一起使用时 起样式效果</li>
</ul>
<p><!doctype html><br><html lang="en"></p>
<p><head><br> <meta charset="UTF-8"><br> <title>Document</title><br> <style><br> h2+p {<br> font-weight: bold;<br> }<br> </style><br></head></p>
<p><body><br> <article><br> <h1>Web前端开发</h1><br> <h2>HTML</h2></p>
<p> <p>超文本标记语言</p> <!-- 粗体显示 --><br> <p>用于构建网页结构，添加页面内容。</p><br> <h2>CSS</h2><br> <p>层叠样式表</p><!-- 粗体显示 --><br> <p>用于构建网页样式，美化页面。</p><br> <h2>JS</h2><br> <p>Javascript</p><!-- 粗体显示 --><br> <!-- 当h2和p标签一起使用时 起样式效果 --><br> <p> 用于构建网页行为，使用户获得更好的体验。</p><br> </article><br></body></p>
<p></html></p>
<p> </p>
<h3>8、全局选择器</h3>
<ul>
<li>当以<code>*</code>作为选择器，对全局标签都起样式效果</li>
</ul>
<p><!doctype html><br><html lang="en"><br><head><br> <meta charset="UTF-8" /><br> <title>Document</title><br> <style type="text/css"><br> * {<br> color:dodgerblue<br> }<br> </style><br></head><br><body><br> <h1>前端技术构成</h1> <br> <p>HTML</p> <br> <p>CSS</p> <br></body><br></html></p>
<h3>9、伪类选择器</h3>
<ul>
<li>根据不同的状态显示不同的样式，常用于标签</li>
</ul>
<p> </p>
<table>
<thead>
<tr><th>状态</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td><code>:link</code></td>
<td>选择所有未访问的链接</td>
</tr>
<tr>
<td><code>:visited</code></td>
<td>选择所有已访问的链接</td>
</tr>
<tr>
<td><code>:hover</code></td>
<td>把鼠标放在链接上的状态</td>
</tr>
<tr>
<td><code>:active</code></td>
<td>选择正在活动链接</td>
</tr>
</tbody>
</table>
<p> </p>
<p><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>伪类选择器</title><br> <style><br> a:link,a:visited{<br> color:#d82727;<br> font-size: 13px;<br> text-decoration: none;<br> }<br> a:hover,a:active{<br> color:#ff7300;<br> text-decoration: underline;<br> }<br> /*普通的标签也可以使用伪类选择器*/<br> p:hover{<br> color:red;<br> }<br> p:active{<br> color:blue;<br> }<br> </style><br></head><br><body><br> <a href="伪类选择器.html">伪类选择器.html</a><br> <p>CSS从入门到精通！</p><br></body><br></html></p>
<h3>10、选择器优先级</h3>
<p><code>1、</code>行内样式 > ID选择器 > 类选择器 > 标签选择器<br><code>2、</code>同一优先级时，后加载的会覆盖先加载的同名样式，所以离的越近<br>越优先<br><code>3、</code>可以用 !important 定义最高优先级</p>
<p> </p>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br><html><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br><title>Insert title here</title><br><style type="text/css"><br> .p1{<br> color:blue;/*<span style="font-family:";">1</span>没加important 显示为红色 */<br> }</p>
<p> .p2{<br> color:blue;<br> color:red!important;/*2加上了important属性优先级高 显示为红色 */<br> }<br></style></p>
<p></head><br><body><br><p class="p1">1没加important</p><br><p class="p2">2加了important属性</p><br></body><br></html></p>
<h2>四、CSS常用属性</h2>
<h3>1、字体属性</h3>
<table style="height: 183px; width: 324px">
<thead>
<tr><th>属性</th><th>作用</th></tr>
</thead>
<tbody>
<tr>
<td><code>font-size</code></td>
<td>设置文本的大小</td>
</tr>
<tr>
<td><code>font-weight</code></td>
<td>设置文本的粗细</td>
</tr>
<tr>
<td><code>font-family</code></td>
<td>设置文本的字体</td>
</tr>
<tr>
<td><code>font-style</code></td>
<td>指定文本的字体样式</td>
</tr>
<tr>
<td><code>font</code></td>
<td>在一个声明中设置所有的字体属性</td>
</tr>
</tbody>
</table>
<p><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Document</title><br> <style><br> div{<br> font-size: 30px;<br> }<br> p{<br> /*font-size: 20px;*/<br> font-size: 80%;<br> }<br> .hello{<br> font-size: 2em;<br> }<br> body{<br> font-size: 62.5%;<br> }<br> ul li{<br> /*font-size: 30px;<br> font-weight: bold;<br> font-family: 华文行楷,宋体,黑体;<br> font-style: italic;*/<br> font: italic bold 30px 微软雅黑;<br> }<br> </style><br></head><br><body><br> <p><br> CSS从入门到精通<br> <span>CSS笔记</span><br> </p><br> <span>CSS笔记</span><br> <hr></p>
<p> <div><br> 我的DIV<br> <p><br> CSS从入门到精通<br> <span>CSS笔记</span><br> </p><br> </div><br> <hr></p>
<p> <span class="hello">CSS笔记</span><br> <hr></p>
<p> <ul><br> <li><br> 前端笔记<br> </li><br> </ul><br></body><br></html></p>
<p> </p>
<h3>2、文本属性</h3>
<table style="height: 526px; width: 359px" border="0">
<tbody>
<tr>
<td>
<p>属性 作用</p>
</td>
<td>作用</td>
</tr>
<tr>
<td>color</td>
<td>设置文本颜色</td>
</tr>
<tr>
<td>direction </td>
<td>设置文本方向</td>
</tr>
<tr>
<td>letter-spacing </td>
<td>设置字符间距</td>
</tr>
<tr>
<td>line-height </td>
<td>设置行高</td>
</tr>
<tr>
<td>text-align</td>
<td> 对齐元素中的文本</td>
</tr>
<tr>
<td>text-decoration </td>
<td>向文本添加修饰</td>
</tr>
<tr>
<td>text-indent</td>
<td>缩进元素中文本的首行</td>
</tr>
<tr>
<td>white-space </td>
<td>设置元素中空白的处理方式</td>
</tr>
<tr>
<td>word-spacing </td>
<td>设置字间距</td>
</tr>
</tbody>
</table>
<p> </p>
<p><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Document</title><br> <style><br> p{<br> color: red;<br> /*background-color: #ccc;*/<br> /*background-color: rgba(0,255,0,0.5);*/<br> background-color: rgba(197, 15, 234, 0.5);<br> line-height: 50px;<br> text-align: center;<br> }<br> img{<br> vertical-align: middle;<br> }<br> div{<br> text-indent: 30px;<br> }<br> span{<br> font-size: 30px;<br> text-decoration: underline;<br> text-transform: capitalize;<br> letter-spacing: 10px;<br> world-spacing:;<br> }<br> h3{<br> width: 300px;<br> height: 200px;<br> background-color:#ccc;<br> white-space: nowrap;<br> overflow:hidden;<br> }<br> </style><br></head><br><body><br> <p>welcome to css!</p><br> <p>welcome to css!</p><br> <p>welcome to css!</p><br> <hr></p>
<p> <img src="css.png" alt="" width="15%"><br> HTML和CSS笔记<br> <hr></p>
<p><br> <div>&nbsp;&nbsp;这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</div><br> <hr><br> <div>这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</div><br> <hr></p>
<p> <span>hello world</span><br> <hr></p>
<p> <h3>这里是web前端开发课程的课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</h3><br> <hr><br></body><br></html></p>
<p> </p>
<h3>3、列表属性</h3>
<table>
<thead>
<tr><th>属性</th><th>作用</th></tr>
</thead>
<tbody>
<tr>
<td><code>list-style-type</code></td>
<td>设置列表项标志的类型</td>
</tr>
<tr>
<td><code>list-style-image</code></td>
<td>将图像设置为列表项标志</td>
</tr>
<tr>
<td><code>list-style-position</code></td>
<td>设置列表中列表项标志的位置</td>
</tr>
<tr>
<td><code>list-style</code></td>
<td>简写</td>
</tr>
</tbody>
</table>
<p><!doctype html><br><html lang="en"><br><head><br><meta charset="UTF-8" /><br><title>Document</title><br><style type="text/css"><br> #othernews {<br> text-align:left;<br> font-size:14px;<br> line-height:1.5em;<br> list-style-image:url(images/bullet1.gif);<br> }<br> a:link {<br> color: #09f;/*浅蓝*/<br> text-decoration: none;<br> }<br> a:visited {<br> text-decoration: none;<br> color: #930;/*红*/<br> }<br> a:hover {<br> text-decoration: underline;<br> color: #03c;/*深蓝*/<br> }<br> a:active {<br> text-decoration: none;<br> color: #03c;/*深蓝*/<br> }<br></style><br></head></p>
<p><body> <br> <div id = "othernews"><br> 相关阅读:<br> <ul><br> <li><a href="#" >迪拜华商财富缩水 瞻望前景信心犹豫</a></li><br> <li><a href="#" >全球华商总资产恢复增至3.9万亿美元</a></li><br> <li><a href="#" >华商基金胡宇权：行业不平衡将带来投资机会</a></li><br> </ul><br> </div><br></body><br></html></p>
<p> </p>
<h3>4、表格属性</h3>
<ul>
<li>border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开</li>
<li>Width和height属性定义表格的宽度和高度</li>
<li>text-align属性设置水平对齐方式，向左，右，或中心</li>
</ul>
<p><!DOCTYPE html><br><html lang="en"></p>
<p><head><br> <meta charset="UTF-8"><br> <title>Document</title><br> <style><br> body {<br> font: 14px/2em "宋体";<br> }</p>
<p> table {<br> width: 300px;<br> margin: 0 auto;<br> /*表格在article里面居中*/<br> border-collapse: collapse;<br> /*表格边框重合*/<br> font-size: 12px;<br> border: 1px solid;<br> }</p>
<p> caption {<br> letter-spacing: 3px;<br> /*表格标题字符间距*/<br> }</p>
<p> tbody tr:nth-child(odd) {</p>
<p> /*表格主体的奇数行背景为浅蓝色*/<br> background-color: lightblue;<br> }</p>
<p> td,<br> th {<br> /* border: 1px solid; */<br> text-align: center;<br> }<br> </style><br></head></p>
<p><body><br> <table><br> <!-- 表格开始 --><br> <caption>名词解释</caption> <!-- 标题 --><br> <thead><br> <!-- 表头 --></p>
<p> <tr><br> <!-- 行 --><br> <th> 名词 </th> <!-- 表头单元格 --><br> <th> 解释 </th><br> </tr><br> </thead><br> <tbody><br> <!-- 表体 --><br> <tr><br> <!-- 第一行 --><br> <td>HTML</td> <!-- 数据单元格 --><br> <td>HyperText Markup Language超文本标记语言</td></p>
<p> </tr><br> <tr><br> <!-- 第二行 --><br> <td>CSS</td><br> <td>Cascading Style Sheets层叠样式表</td><br> </tr><br> <tr><br> <!-- 第三行 --><br> <td>JS</td><br> <td>JavaScript语言</td><br> </tr><br> </tbody><br> </table></p>
<p></body></p>
<p></html></p>
<p> </p>
<h3>5、背景属性</h3>
<table border="0">
<tbody>
<tr>
<td>
<p>属性 </p>
</td>
<td>作用</td>
</tr>
<tr>
<td>background</td>
<td>简写</td>
</tr>
<tr>
<td>background-attachment </td>
<td>背景图像是否固定或者随着页面的其余部分滚动</td>
</tr>
<tr>
<td>background-color</td>
<td> 设置元素的背景颜色</td>
</tr>
<tr>
<td>background-image </td>
<td>把图像设置为背景</td>
</tr>
<tr>
<td>background-position</td>
<td>设置背景图像的起始位置</td>
</tr>
<tr>
<td>background-repeat </td>
<td>设置背景图像是否及如何重复</td>
</tr>
</tbody>
</table>
<p> </p>
<ul>
<li>index.css文件</li>
</ul>
<p>body{<br> background-color: #E0E0E0;<br>}<br>h1{<br> background-color: #33CC66;<br>}<br>p{<br> background-color: #FFFFFF;<br>}</p>
<ul>
<li>html文件</li>
</ul>
<p><!DOCTYPE><br><html><br> <head><br> <meta charset="utf-8"><br> <title>CSS学习</title><br> <link rel="stylesheet" type="text/css" href="index.css"><br> </head><br> <body><br> <h1>Web前端开发</h1><br> <p>段落背景为白色</p><br> <p>段落背景为白色</p><br> <p>段落背景为白色</p><br> </body><br></html></p>
<p> </p>
<h3>6、对齐方式</h3>
<p><code>1、</code>text-align——文本对齐</p>
<ul>
<li>规定元素中的文本的水平对齐方式</li>
</ul>
<table>
<thead>
<tr><th>属性值</th><th>描述</th></tr>
</thead>
<tbody>
<tr>
<td><code>left</code></td>
<td>默认值，文本排列到左边</td>
</tr>
<tr>
<td><code>right</code></td>
<td>文本排列到右边</td>
</tr>
<tr>
<td><code>center</code></td>
<td>文本排列到中间</td>
</tr>
<tr>
<td><code>justify</code></td>
<td>文本两端对齐</td>
</tr>
</tbody>
</table>
<p><strong>实例：</strong></p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS</title> <br><style><br>.center {<br> text-align: center;<br> border: 3px solid green;<br>}<br></style><br></head><br><body></p>
<p><h2>文本居中对齐</h2></p>
<p><div class="center"><br><p>文本居中对齐。</p><br></div></p>
<p></body></p>
<p> </p>
<p> </p>
<p><code>2、</code>margin: auto; —— 元素居中对齐</p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS</title> <br><style><br>.center {<br> margin: auto;<br> width: 60%;<br> border: 3px solid #73AD21;<br> padding: 10px;<br>}<br></style><br></head><br><body></p>
<p><h2>元素居中对齐</h2><br><p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p></p>
<p><div class="center"><br><p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p><br></div></p>
<p></body><br></html></p>
<p> </p>
<p><code>3、</code>position —— 左右对齐</p>
<p><!DOCTYPE html><br><html><br><head><br><style><br>.right {<br> position: absolute;<br> right: 0px;<br> width: 300px;<br> border: 3px solid #73AD21;<br> padding: 10px;<br>}<br></style><br></head><br><body></p>
<p><h2>右对齐</h2><br><p>以下实例演示了如何使用 position 来实现右对齐:</p></p>
<p><div class="right"><br><p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p><br></div></p>
<p></body><br></html></p>
<p> </p>
<p> </p>
<p><code>4、</code>float——左右对齐</p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS</title> <br><style><br>.right {<br> float: right;<br> width: 300px;<br> border: 3px solid #73AD21;<br> padding: 10px;<br>}<br></style><br></head><br><body></p>
<p><h2>右对齐</h2><br><p>以下实例演示了使用 float 属性来实现右对齐:</p></p>
<p><div class="right"><br><p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p><br></div></p>
<p></body><br></html></p>
<p> </p>
<p>7、盒子模型<br>盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：</p>
<p>width 宽度<br>height 高度<br>border 边框——围绕在内边距和内容外的边框<br>padding 内边距——清除内容周围的区域，内边距是透明的<br>margin 外边距——清除边框外的区域，外边距是透明的<br>content 内容——盒子的内容，显示文本和图像</p>
<p> </p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS入门</title><br><style><br>div {<br> background-color: lightgrey;<br> width: 300px;<br> border: 25px solid green;<br> padding: 25px;<br> margin: 25px;<br>}<br></style><br></head><br><body></p>
<p><h2>盒子模型演示</h2></p>
<p><p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p></p>
<p><div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div></p>
<p></body><br></html></p>
<p> </p>
<h2>五、CSS定位</h2>
<p>position 属性指定了元素的定位类型。<br>position 属性的五个值：</p>
<ul>
<ul>
<li>static</li>
<li>relative</li>
<li>fixed</li>
<li>absolute</li>
<li>sticky<br>元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。</li>
</ul>
</ul>
<p> </p>
<h3>1、<code>static</code>定位</h3>
<ul>
<li>HTML 元素的默认值，即没有定位，遵循正常的文档流对象</li>
<li>静态定位的元素不会受到 top, bottom, left, right影响</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>title</title><br><style><br>div.static {<br> position: static;<br> border: 3px solid #73AD21;<br>}<br></style><br></head><br><body></p>
<p><h2>position: static;</h2></p>
<p><p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p></p>
<p><div class="static"><br>该元素使用了 position: static;<br></div></p>
<p> </p>
<p> </p>
<h3>2、<code>fixed</code> 定位</h3>
<ul>
<li>元素的位置相对于浏览器窗口是固定位置</li>
<li>即使窗口是滚动的它也不会移动：</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>title</title> <br><style><br>p.pos_fixed<br>{<br> position:fixed;<br> top:30px;<br> right:5px;<br>}<br></style><br></head><br><body></p>
<p><p class="pos_fixed">Some more text</p><br><p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p><br><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><br></body><br></html></p>
<p> </p>
<h3>3、<code>relative</code> 定位</h3>
<ul>
<li>相对定位元素的定位是相对其正常位置</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>css教程</title> <br><style><br>h2.pos_left<br>{<br> position:relative;<br> left:-20px;<br>}</p>
<p>h2.pos_right<br>{<br> position:relative;<br> left:20px;<br>}<br></style><br></head></p>
<p><body><br><h2>这是位于正常位置的标题</h2><br><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><br><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2><br><p>相对定位会按照元素的原始位置对该元素进行移动。</p><br><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><br><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p><br></body></p>
<p></html></p>
<ul>
<li>移动相对定位元素，但它原本所占的空间不会改变。</li>
</ul>
<p> </p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>css教程</title> <br><style><br>h2.pos_top<br>{<br> position:relative;<br> top:-50px;<br>}<br></style><br></head></p>
<p><body><br><h2>这是一个没有定位的标题</h2><br><h2 class="pos_top">这个标题是根据其正常位置向上移动</h2><br><p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p><br></body></p>
<p></html></p>
<p> </p>
<h3>4、<code>absolute</code> 定位</h3>
<ul>
<li>绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>css教程</title> <br><style><br>h2<br>{<br> position:absolute;<br> left:100px;<br> top:150px;<br>}<br></style><br></head></p>
<p><body><br><h2>这是一个绝对定位了的标题</h2><br><p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p><br></body></p>
<p></html></p>
<p> </p>
<h3>5、<code>sticky</code> 定位</h3>
<ul>
<li>sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位</li>
<li>position: sticky; 基于用户的滚动位置来定位</li>
<li>粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换</li>
<li>它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置</li>
<li>元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位</li>
<li>这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS教程</title> <br><style><br>div.sticky {<br>position: -webkit-sticky;<br>position: sticky;<br>top: 0;<br>padding: 5px;<br>background-color: #cae8ca;<br>border: 2px solid #4CAF50;<br>}<br></style><br></head><br><body></p>
<p><p>尝试滚动页面。</p><br><p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p></p>
<p><div class="sticky">我是粘性定位!</div></p>
<p><div style="padding-bottom:2000px"><br><p>滚动我</p><br><p>来回滚动我</p><br><p>滚动我</p><br><p>来回滚动我</p><br><p>滚动我</p><br><p>来回滚动我</p><br></div></p>
<p></body><br></html></p>
<h3>6、重叠的元素</h3>
<ul>
<li>元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素</li>
<li>z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）</li>
<li>一个元素可以有正数或负数的堆叠顺序：</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS教程</title> <br><style><br>img<br>{<br> position:absolute;<br> left:0px;<br> top:0px;<br> z-index:-1;<br>}<br></style><br></head></p>
<p><body><br><h1>This is a heading</h1><br><img src="w3css.gif" width="100" height="140" /><br><p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p><br></body><br></html></p>
<p> </p>
<h2>六、CSS浮动</h2>
<h3>1、什么是 CSS Float（浮动）？</h3>
<ul>
<li>CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列</li>
<li>Float（浮动），往往是用于图像，但它在布局时一样非常有用</li>
</ul>
<h3>2、元素怎样浮动</h3>
<p>元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。</p>
<p>一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</p>
<p>浮动元素之后的元素将围绕它。</p>
<p>浮动元素之前的元素将不会受到影响。</p>
<p>如果图像是右浮动，下面的文本流将环绕在它左边：</p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS教程</title><br><style><br>img <br>{<br> float:right;<br>}<br></style><br></head></p>
<p><body><br><p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p><br><p><br><img src="logocss.gif" width="95" height="84" /><br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br>这是一些文本。这是一些文本。这是一些文本。<br></p><br></body></p>
<p></html></p>
<p> </p>
<h3>3、彼此相邻的浮动元素</h3>
<p>如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。</p>
<p>在这里，我们对图片廊使用 float 属性：</p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS教程</title> <br><style><br>.thumbnail <br>{<br> float:left;<br> width:110px;<br> height:90px;<br> margin:5px;<br>}<br></style><br></head></p>
<p><body><br><h3>图片库</h3><br><p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p><br><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><br><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><br><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><br><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"><br><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><br><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><br><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><br><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"><br></body><br></html></p>
<p> </p>
<h3>4、清除浮动 - 使用 clear</h3>
<p>元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。</p>
<p>clear 属性指定元素两侧不能出现浮动元素。</p>
<p>使用 clear 属性往文本中添加图片廊：</p>
<p> </p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"> <br><title>CSS教程</title> <br><style><br>.thumbnail <br>{<br> float:left;<br> width:110px;<br> height:90px;<br> margin:5px;<br>}<br>.text_line<br>{<br> clear:both;<br> margin-bottom:2px;<br>}<br></style><br></head></p>
<p><body><br><h3>图片库</h3><br><p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p><br><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><br><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><br><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><br><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"><br><h3 class="text_line">第二行</h3><br><img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"><br><img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"><br><img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"><br><img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"><br></body><br></html></p>
<p> </p>
<h2>七、CSS网页布局</h2>
<h3>1、网页布局</h3>
<ul>
<li>网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。</li>
</ul>
<p> </p>
<table style="height: 224px; width: 445px" border="0">
<tbody>
<tr>
<td colspan="3">头部区域</td>
</tr>
<tr>
<td colspan="3"> 菜单导航区域</td>
</tr>
<tr>
<td>内容区域</td>
<td>容区域</td>
<td>容区域</td>
</tr>
<tr>
<td colspan="3">底部区域</td>
</tr>
</tbody>
</table>
<p> </p>
<h3>2、头部区域</h3>
<ul>
<li>头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>CSS 网页布局 </title><br><meta name="viewport" content="width=device-width, initial-scale=1"><br><style><br>body {<br>margin: 0;<br>}</p>
<p>/* 头部样式 */<br>.header {<br>background-color: #f1f1f1;<br>padding: 20px;<br>text-align: center;<br>}<br></style><br></head><br><body></p>
<p><div class="header"><br><h1>头部区域</h1><br></div></p>
<p></body><br></html></p>
<h3>3、菜单导航区域</h3>
<ul>
<li>菜单导航条包含了一些链接，可以引导用户浏览其他页面：</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>CSS 网页布局 </title><br><meta name="viewport" content="width=device-width, initial-scale=1"><br><style><br>* {<br>box-sizing: border-box;<br>}</p>
<p>body {<br>margin: 0;<br>}</p>
<p>/* 头部样式 */<br>.header {<br>background-color: #f1f1f1;<br>padding: 20px;<br>text-align: center;<br>}</p>
<p>/* 导航条 */<br>.topnav {<br>overflow: hidden;<br>background-color: #333;<br>}<br> <br>/* 导航链接 */<br>.topnav a {<br>float: left;<br>display: block;<br>color: #f2f2f2;<br>text-align: center;<br>padding: 14px 16px;<br>text-decoration: none;<br>}<br> <br>/* 链接 - 修改颜色 */<br>.topnav a:hover {<br>background-color: #ddd;<br>color: black;<br>}<br></style><br></head><br><body></p>
<p><div class="header"><br><h1>头部区域</h1><br></div></p>
<p><div class="topnav"><br><a href="#">链接</a><br><a href="#">链接</a><br><a href="#">链接</a><br></div></p>
<p></body><br></html></p>
<p> </p>
<h3>4、内容区域</h3>
<ul>
<li>1 列：一般用于移动端</li>
<li>2 列：一般用于平板设备</li>
<li>3 列：一般用于 PC 桌面设备</li>
</ul>
<p>我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：</p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>CSS 网页布局 </title><br><meta name="viewport" content="width=device-width, initial-scale=1"><br><style><br>* {<br>box-sizing: border-box;<br>}</p>
<p>body {<br>margin: 0;<br>}</p>
<p>/* 头部样式 */<br>.header {<br>background-color: #f1f1f1;<br>padding: 20px;<br>text-align: center;<br>}</p>
<p>/* 导航条 */<br>.topnav {<br>overflow: hidden;<br>background-color: #333;<br>}</p>
<p>/* 导航链接 */<br>.topnav a {<br>float: left;<br>display: block;<br>color: #f2f2f2;<br>text-align: center;<br>padding: 14px 16px;<br>text-decoration: none;<br>}</p>
<p>/* 链接 - 修改颜色 */<br>.topnav a:hover {<br>background-color: #ddd;<br>color: black;<br>}</p>
<p>/* 创建三个相等的列 */<br>.column {<br>float: left;<br>width: 33.33%;<br>}<br> <br>/* 列后清除浮动 */<br>.row:after {<br>content: "";<br>display: table;<br>clear: both;<br>}<br> <br>/* 响应式布局 - 小于 600 px 时改为上下布局 */<br>@media screen and (max-width: 600px) {<br>.column {<br> width: 100%;<br>}<br>}<br></style><br></head><br><body></p>
<p><div class="header"><br><h1>头部区域</h1><br><p>重置浏览器大小查看效果。</p><br></div></p>
<p><div class="topnav"><br><a href="#">链接</a><br><a href="#">链接</a><br><a href="#">链接</a><br></div></p>
<p><div class="row"><br><div class="column"><br> <h2>第一列</h2><br> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</p><br></div><br><br><div class="column"><br> <h2>第二列</h2><br> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</div><br><br><div class="column"><br> <h2>第三列</h2><br> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</div><br></div></p>
<p></body><br></html></p>
<h3>5、底部区域</h3>
<ul>
<li>底部区域在网页的最下方，一般包含版权信息和联系方式等</li>
</ul>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>CSS 网页布局 </title><br><meta name="viewport" content="width=device-width, initial-scale=1"><br><style><br>* {<br>box-sizing: border-box;<br>}</p>
<p>body {<br>margin: 0;<br>}</p>
<p>/* 头部样式 */<br>.header {<br>background-color: #f1f1f1;<br>padding: 20px;<br>text-align: center;<br>}</p>
<p>/* 导航条 */<br>.topnav {<br>overflow: hidden;<br>background-color: #333;<br>}</p>
<p>/* 导航链接 */<br>.topnav a {<br>float: left;<br>display: block;<br>color: #f2f2f2;<br>text-align: center;<br>padding: 14px 16px;<br>text-decoration: none;<br>}</p>
<p>/* 链接 - 修改颜色 */<br>.topnav a:hover {<br>background-color: #ddd;<br>color: black;<br>}</p>
<p>/* 创建三个相等的列 */<br>.column {<br>float: left;<br>padding: 10px;<br>}</p>
<p>/* 左右两侧宽度 */<br>.column.side {<br>width: 25%;<br>}</p>
<p>/* 中间区域宽度 */<br>.column.middle {<br>width: 50%;<br>}</p>
<p>/* 列后面清除浮动 */<br>.row:after {<br>content: "";<br>display: table;<br>clear: both;<br>}</p>
<p>/* 响应式布局 - 宽度小于600px时设置上下布局 */<br>@media screen and (max-width: 600px) {<br>.column.side, .column.middle {<br> width: 100%;<br>}<br>}</p>
<p>/* 底部样式 */<br>.footer {<br>background-color: #f1f1f1;<br>padding: 10px;<br>text-align: center;<br>}<br></style><br></head><br><body></p>
<p><div class="header"><br><h1>头部区域</h1><br><p>重置浏览器大小查看效果。</p><br></div></p>
<p><div class="topnav"><br><a href="#">链接</a><br><a href="#">链接</a><br><a href="#">链接</a><br></div></p>
<p><div class="row"><br><div class="column side"><br> <h2>左侧栏</h2><br> <p>学的不仅是技术，更是梦想！</p><br></div><br><br><div class="column middle"><br> <h2>主区域内容</h2><br> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</p><br></div><br><br><div class="column side"><br> <h2>右侧栏</h2><br> <p>的不仅是技术，更是梦想！</p><br></div><br></div></p>
<p><div class="footer"><br><p>底部区域</p><br></div><br><br></body><br></html></p>
<p> </p>
<p> </p>
<p>---------下面是-------</p>
<h2>CSS网响应式网页布局代码演示图</h2>
<p>---------如下图所示------</p>
<p> </p>
<p><img src="https://img2022.cnblogs.com/blog/2978130/202210/2978130-20221001172724742-508272024.png" title="css总体演示"></p>
<div> </div>
<div>
<h2>CSS图片演示代码如下：响应式网页布局</h2>
</div>
<div>-------------------------下列代码可复制粘贴运行-------------------</div>
<h3>6、响应式网页布局</h3>
<p>通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：</p>
<p> </p>
<p><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>CSS 网页布局</title><br><style><br>* {<br>box-sizing: border-box;<br>}<br> <br>body {<br>font-family: Arial;<br>padding: 10px;<br>background: #f1f1f1;<br>}<br> <br>/* 头部标题 */<br>.header {<br>padding: 30px;<br>text-align: center;<br>background: white;<br>}<br> <br>.header h1 {<br>font-size: 50px;<br>}<br> <br>/* 导航条 */<br>.topnav {<br>overflow: hidden;<br>background-color: #333;<br>}<br> <br>/* 导航条链接 */<br>.topnav a {<br>float: left;<br>display: block;<br>color: #f2f2f2;<br>text-align: center;<br>padding: 14px 16px;<br>text-decoration: none;<br>}<br> <br>/* 链接颜色修改 */<br>.topnav a:hover {<br>background-color: #ddd;<br>color: black;<br>}<br> <br>/* 创建两列 */<br>/* Left column */<br>.leftcolumn { <br>float: left;<br>width: 75%;<br>}<br> <br>/* 右侧栏 */<br>.rightcolumn {<br>float: left;<br>width: 25%;<br>background-color: #f1f1f1;<br>padding-left: 20px;<br>}<br> <br>/* 图像部分 */<br>.fakeimg {<br>background-color: #aaa;<br>width: 100%;<br>padding: 20px;<br>}<br> <br>/* 文章卡片效果 */<br>.card {<br>background-color: white;<br>padding: 20px;<br>margin-top: 20px;<br>}<br> <br>/* 列后面清除浮动 */<br>.row:after {<br>content: "";<br>display: table;<br>clear: both;<br>}<br> <br>/* 底部 */<br>.footer {<br>padding: 20px;<br>text-align: center;<br>background: #ddd;<br>margin-top: 20px;<br>}<br> <br>/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */<br>@media screen and (max-width: 800px) {<br>.leftcolumn, .rightcolumn { <br> width: 100%;<br> padding: 0;<br>}<br>}<br> <br>/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */<br>@media screen and (max-width: 400px) {<br>.topnav a {<br> float: none;<br> width: 100%;<br>}<br>}<br></style><br></head><br><body></p>
<p><div class="header"><br><h1>我的网页</h1><br><p>重置浏览器大小查看效果。</p><br></div></p>
<p><div class="topnav"><br><a href="#">链接</a><br><a href="#">链接</a><br><a href="#">链接</a><br><a href="#" style="float:right">链接</a><br></div></p>
<p><div class="row"><br><div class="leftcolumn"><br> <div class="card"><br> <h2>文章标题</h2><br> <h5>2019 年 4 月 17日</h5><br> <div class="fakeimg" style="height:200px;">图片</div><br> <p>一些文本...</p><br> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！ </p><br> </div><br> <div class="card"><br> <h2>文章标题</h2><br> <h5>2019 年 4 月 17日</h5><br> <div class="fakeimg" style="height:200px;">图片</div><br> <p>一些文本...</p><br> <p>学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！学的不仅是技术，更是梦想！</p><br> </div><br></div><br><div class="rightcolumn"><br> <div class="card"><br> <h2>关于我</h2><br> <div class="fakeimg" style="height:100px;">图片</div><br> <p>关于我的一些信息..</p><br> </div><br> <div class="card"><br> <h3>热门文章</h3><br> <div class="fakeimg"><p>图片</p></div><br> <div class="fakeimg"><p>图片</p></div><br> <div class="fakeimg"><p>图片</p></div><br> </div><br> <div class="card"><br> <h3>关注我</h3><br> <p>一些文本...</p><br> </div><br></div><br></div></p>
<p><div class="footer"><br><h2>底部区域</h2><br></div></p>
<p></body><br></html></p>
<p> </p>
<p>-------------------------感谢你的观看-----------------------------</p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：笒鬼鬼，转载请注明原文链接：https://www.cnblogs.com/cenguigui/p/css.html</p><br><br>
来源：https://www.cnblogs.com/cenguigui/p/css.html
頁:
[1]