Web前端学习3

最新推荐文章于 2024-07-14 16:43:41 发布
最新推荐文章于 2024-07-14 16:43:41 发布
阅读量842 收藏
点赞数 1
文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74232590/article/details/127599478
版权

Web前端学习3

一、标签群组通配等选择器

标签选择器（TAG选择器)
css : div{ } <div></div>
使用的场景:
1.去掉某些标签的默认样式时
2. 复杂的选择器中，如层次选择器
html : <div>
群组选择器(分组选择器)
可以通过用逗号隔开的方式，给不同的选择器添加统一的css样式，来达到代码的复用
css : div、p、span{ }
通配选择器
*{ } -> div，ul，li，p，h1，h2······{}
注: 尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用
使用场景: 去掉所有标签的默认样式时

<style>
        /* div{ background: red;}
        #text{ background: red;}
        .title{ background: red;} */
        /* div , #text ,.title{ background: red;} */
        *{ border: red solid;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>

二、层次选择器

后代 : M N{ }
父子 : M > N{ }
兄弟 : M ~ N{ } 当前M下面的所有兄弟N标签
相邻 : M + N{ } 当前M相邻的N标签

<style>
        /* #list li{ border: red solid;} */
        /* #list > li{ border: red solid;} */
        /* div ~ h2{ background: red;} */
        div + h2 { background: red;}
    </style>
</head>
<body>
    <!-- <ul id="list">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol> -->
    <h2>这是一个标题</h2>
    <di>这是一个块</di>
    <h2>这是一个标题</h2>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
    <h2>这是一个标题</h2>
</body>

三、属性选择器


= : 完全匹配
*= : 部分匹配
^= : 起始匹配
$= : 结束匹配
[ ][ ][ ] : 多个中括号组合匹配

<style>
        /* div[class]{ background: red;} */
        /* div[class=box]{ background: red;} */
        /* div[class*=search]{ background: red;} */
        /* div[class^=search]{ background: red;} */
        /* div[class$=search]{ background: red;} */
        div[class][id]{ background: red;}
    </style>
</head>
<body>
    <div>庄达菲</div>
    <div class="box" id="elem">李进步</div>
    <div class="search">周林林</div>
    <div class="search-button">韩菲</div>
    <div class="button-search">白天</div>
</body>

四、hover等伪类选择器

伪类选择器
M:伪类{ }
CSS伪类用于向某些元素添加特殊效果。一般用于初始样式添加不上的时候，用伪类来添加。
1.:link 访问前的样式(只能添加a标签)
2.:visited 访问后的样式 (只能添加a标签)
3.:hover 鼠标移入时的样式(可以添加给所有的标签)
4.:active 鼠标按下时的样式(可以添加给所有的标签)
注:
1.link visited 只能给a标签加，hover和active可以给所有标签加。
2.如果四个伪类都失效，一定要注意顺序 : L V H A。
3.一般网站只这样去设置 : a{ } a:hover{ }。

 <style>
        /* div{ width: 200px; height: 200px; background: red;}
        div:hover{ background: blue;}
        div:active{ background: green;} */
        /* a:link { color:red;}
        a:visited{ color:blue;}
        a:hover{ color:green;}
        a:active{ color:yellow;} */
        a{ color:gray;}
        a:hover{ color: red;}
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
</body>

五、after等伪类选择器

:after、:before 通过伪类的方式给元素添加一些文本内容，使用content属性
:checked、:disabled、:focus都是针对表单元素的

<style>
    /* div::after{ content:"Word";} */
    /* div:before{ content:"Word"; color: red;} */
    /* :checked{ width: 100px; height: 100px;} */
    :disabled{ width: 100px; height: 100px;}
    :focus{ background: red;}
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="checkbox" checked>
    <input type="checkbox" disabled>
    <input type="text">
</body>

六、结构伪类选择器

1.:nth-of-type()、:nth-child()
角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
2.:first-of-type、:first-child
3.:last-of-type、:last-child
4.:only-of-type、:only-child
nth-of-type()和nth-child()之间的区别
type : 类型
child : 孩子

<style>
        /* li:nth-of-type(n){ background: red;} */
        /* li:nth-of-type(2n){ background: blue;}
        li:nth-of-type(2n+1){ background: red;} */
        /* li:first-of-type{ background: red;}
        li:last-of-type{ background: blue;} */
        /* li:only-of-type{ background: red;} */
        /* li:nth-of-type(2){ background: red;} */
        /* div:nth-child(2){ background: red;} */
        /* li:nth-child(3){ background: red;} */
        /* li:nth-of-type(3){ background:red;} */
        div:only-of-type{ background: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <div>庄达菲</div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

七、css样式的继承

文字相关的样式可以被继承
布局相关的样式不能被继承(默认是不能继承的，但是可以设置继承属性)
注 : inherit值

<style>
        div{ width:300px; height: 300px; border: 1px red solid;
             color: red; font-size: 30px;}
        p{ border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

八、集、单一样式的优先级

1.相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
2.内部样式与外部样式
内部样式与外部样式优先级相同，如果设置了相同样式，那么后写的引入方式优先级高。
3.单一样式优先级
style行间 > id > class > tag > * > 继承
注 : style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1

<!-- <style>
        div{ color:red;}
        div{ color:blue;}
    </style>
    <link rel="stylesheet" href="./base.css"> -->
    <style>
        /* #elem{ color:red;} */
        /* .box{ color: blue;} */
        /* div{ color:green;} */
        /* *{ color:red;} */
        body{ color:blue;}
    </style>
    </head>
<body>
    <!-- <div id="elem" style="color:blue;">这是一个块</div> -->
    <div id="elem" class="box">这是一个块</div>
</body>

九、important群组等优先级

!important
提升样式优先级， 非规范方式，不建议使用。(不能针对继承的属性进行优先级的提升)
标签+类与单类
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高

<style>
        /* #elem{ color:red !important;}
        *{ color:green;} */
        /* #elem{ color:red ;}
        *{ color:green !important;} */
        /* #elem{ color:red ;}
        *{ color:green ;}
        body{ color:gray !important;} */
        /* .box{ color:red;}
        div.box{ color:blue;} */
        /* div.box{ color:blue;}
        .box{ color:red;} */
        /* div,p{ color:red;}
        div{ color:blue;}*/
        div{ color:blue;}
        div,p{ color:red;}
    </style>
</head>
<body>
    <!-- <div id="elem" style="color:blue;">这是一个块</div> -->
    <div class="box">这是一个块</div>
    <p>这是一个段落</p>
</body>

十、层次的优先级

层次优先级
1.权重比较
ul li .box p input{ } 1 + 1+ 10 + 1 + 1
.hello span #elem{ } 10 + 1 + 100
2.均分比较
ul li .box p input{ } li p input
.hello span #elem{ } #elem{ }

十一、css盒子模型


盒子模型:
组成 :
content -> padding -> border -> margin
物品 -> 填充物 -> 包装盒 -> 盒子与盒子之间的间距
1.content : 内容区域 width和height组成的
2.padding : 内边距 (内填充)
只写一个值 : 30px(上下左右)
写两个值 : 30px 40px( 上下、左右 )
写四个值 : 30px 40px 50px 60px ( 上、右、下、左 )
单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom
3.margin : 外边距(外填充)
注 : 1.背景颜色会填充到margin以内的区域(不包括)
2.文字会在content区域。
3.padding不能出现负值，margin是可以出现负值。

<style>
        #box{ width:200px; height:200px; background: red; border:10px transparent solid;
        padding : 30px 50px; margin: -10px;}
        #box2{ width: 200px; height: 200px; background: black; color:white;}
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">又是一个盒子</div>
</body>

十一、box-sizing改变盒模型

box-sizing 盒尺寸，可以改变盒子模型的展现形态
默认值: content-box : width、height -> content
border-box : width、height -> content padding border
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
取值为content-box(默认值) | border-box
使用场景:
1.不用再去计算一些值
2.解决一些100%的问题

<style>
        /* #box{ width:200px; height:200px; background: red; border:10px blue solid;
        padding : 30px 50px;
        box-sizing: border-box;} */
    #box{ width:80px; height:120px; background: red; border:10px blue solid;
        padding : 30px 50px;}
        input{ width: 100%; padding: 30px; box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <input type="text">
</body>

十二、盒模型之margin叠加问题

margin叠加
当给两个盒子同时添加上下边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。
解决方案:
1.BFC规范
2.相办法只给一个元素添加间距

<style>
        /* #box1{ width: 200px; height: 200px; background: red; margin-bottom: 70px;}
        #box2{ width: 200px; height: 200px; background: blue; margin-top: 40px;} */
        /* #box1{ width: 200px; height: 200px; background: red; margin-bottom: 70px;}
        #box2{ width: 200px; height: 200px; background: blue;} */
        #box1{ width: 200px; height: 200px; background: red; margin-bottom: 0;}
        #box2{ width: 200px; height: 200px; background: blue; margin-top: 70px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

十三、盒模型之margin传递问题

margin传递
margin传递的问题只会出现在嵌套的结构中，只有margin-top会有传递的问题，其它三个方向是没有传递问题的。
解决方案;
1.BFC规范
2.给父容器加边框
3.margin换成padding

<style>
        /* #box1{ width: 200px; height: 200px; background: red ;}
        #box2{ width: 100px; height: 100px; background: blue ; margin-top: 100px;} */
        /* #box1{ width: 200px; height: 200px; background: red ; border: 1px black solid;}
        #box2{ width: 100px; height: 100px; background: blue ; margin-top: 100px;} */
        #box1{ width: 200px; height: 100px; background: red ; padding-top: 100px;}        
        #box2{ width: 100px; height: 100px; background: blue ;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

十四、css盒子模型之扩展

margin自适应居中
margin左右自适应是可以的，但是上下自适应是不行的。(如果想实现上下自适应的话，需要在第二大部分来进行学习)
不设置content的现象
width、height不设置的时候，对盒子模型的影响， 会自动去计算容器的大小，节省代码。

/* #box{ width: 400px; height: 100px; background: red; margin-left: 200px;} */
        /* #box{ width: 400px; height: 100px; background: red; 
            margin-left: auto; margin-right: auto; 
            margin: 0 auto;
            margin: auto auto;} */
            #box1{ width: 300px; height: 300px; background: red;}
            /* #box2{ width: 100%; height: 100px; background: blue; color: white;
                 padding-left: 30px; border-left: 10px black solid;} */
            #box2{ height: 100px; background: blue; color: white; padding-left: 30px;
                border-left: 10px black solid; }
    </style>
</head>
<body>
    <!-- <div id="box"></div> -->
    <div id="box1">
        <div id="box2">这是一些内容</div>
    </div>
</body>

十五、盒子模型的嵌套练习

 <style>
        #box1{ width: 350px; height: 350px; border: 1px black dashed; padding: 27px;}
        #box2{ border: 5px #d7effe solid; padding: 20px;}
        #box3{ background: #ffa0df; padding: 41px;}
        #box4{ border: 1px white dashed; padding: 3px;}
        #box5{ border: 1px white dashed; padding: 49px;}
        #box6{ width: 100px; height: 100px; background: #96ff38; border: #fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
             <div id="box3">
                <div id="box4">
                     <div id="box5">
                        <div id="box6"></div>
                     </div>
                </div>
             </div>
        </div>
    </div>
</body>

十六、按类型划分标签

标签分类
按类型
block : 块 ( div、p、ul、li、h1···)
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形
inline : 内联 ( span、a、em、strong、img···)
1.挨在一起的
2.有些样式不支持，例如: width、height、margin、padding···
3.不写宽的时候，宽度由内容决定
4.所在的区域不一定是矩形
5.内联标签之间会有空隙，原因: 换行产生
注: 布局一般用块标签，修饰文本一般用内联标签
inline-block : 内联块( input、select···)
挨在一起，但支持宽高

<style>
        body{ font-size: 0;}
        /* #box1,#box2{ width: 100px; height: 100px; background: red;}   */
        /* #box1,#box2{height: 100px; background: red;}   */
        #content1,#content2{ width: 100px; height: 100px; background: red; font-size: 16px;}
        input{ width: 100px; height: 100px;}  
    </style>
</head>
<body>
    <!-- <div></div>
    <span></span>
    <input type="text"> -->
    <!-- <div id="box1">庄达菲</div>
    <div id="box2">郭淼淼</div> -->
    <!-- <span id="content1">内联1内联1内联1内联1</span><span id="content2">内联2</span> -->
    <span id="content1">内联1内联1内联1内联1</span>
    <span id="content2">内联2</span>
    <input type="text">
    <input type="text">
</body>

十七、按内容划分标签

按内容
Flow : 流的内容
Metadate : 元数据
Sectioning: 分区
Heading : 标题
Phrasing : 措辞
Embedded : 嵌入的
Interactive : 互动的

W3C

十八、按显示划分标签

按显示
替换元素 : 浏览器根据元素的标签和属性，来决定元素的具体显示内容
img、input···
非替换元素 : 将内容直接告诉浏览器，将其显示出来
div、h1、p···

 <style>
        img{ width: 100px; height: 100px;}
    </style>
</head>
<body>
    <img src="./Web前端学习3/img/1.jpg" alt="">
    <!-- <input type="checkbox">
    <h1>标题</h1> -->
</body>

十九、display显示框类型

display
block
inline
inline-block
none
注: 区别
display:none( 不占空间的隐藏)
visibility:hidden( 占空间的隐藏)

<style>
        /* div{ width: 100px; height: 100px; background: red; display: inline;} */
        /* div{ width: 100px; height: 100px; background: red; display: inline-block;}
        span{ width: 100px; height: 100px; background: red; display: inline-block;}
        input{ display:none;} */
        #box1,#box2{ width: 100px; height: 100px; background: red;}
        /* #box1{ display: none;} */
        #box1{ visibility: hidden;}
    </style>
</head>
<body>
    <!-- <div>庄达菲</div>
    <div>郭淼淼</div>
    <span>内联1</span>
    <span>内联2</span>
    <input type="text"> -->
    <div id="box1">庄达菲</div>
    <div id="box2">郭淼淼</div>
</body>

二十、标签嵌套规范

ul、li
dl、dt、dd
table、tr、td
1.块标签可以嵌套内联标签

块嵌套内联
<div>
    <span></span>
    <a href="#"></a>
</div>

块嵌套块
<div>
    <div></div>
</div>

2.块标签不一定能嵌套块标签

特殊:
    错误的写法
<p>
  <div></div>
</p>

3.内联标签不能嵌套块标签
a标签是一个例外

错误的写法:
<span>
     <div></div>
</span>

特殊:
    正确的写法:
<a href="#">
    <div></div>
</a>

二十一、overflow溢出隐藏

overflow
visible : 默认
hidden
scroll
auto
x轴、y轴
overflow-x、over-flow-y针对两个轴分别设置

<style>
        /* div{ width: 300px; height: 200px; border: 1px black solid; overflow: hidden;} */
        /* div{ width: 300px; height: 200px; border: 1px black solid; overflow: scroll;} */
        div{ width: 300px; height: 200px; border: 1px black solid; overflow: auto;}
    </style>
</head>
<body>
    <div>
        庄达菲庄达菲庄达菲庄达菲庄达菲
        庄达菲庄达菲庄达菲庄达菲庄达菲
        庄达菲庄达菲庄达菲庄达菲庄达菲
        庄达菲庄达菲庄达菲庄达菲庄达菲
        庄达菲庄达菲庄达菲庄达菲庄达菲
        庄达菲庄达菲庄达菲庄达菲庄达菲
        庄达菲庄达菲庄达菲庄达菲庄达菲
        庄达菲庄达菲庄达菲庄达菲庄达菲
    </div>
</body>

二十二、透明度与手势

1.opacity : 0(透明，占空间) ~ 1(不透明)
0.5(半透明)
注: 占空间、所有的自内容也会透明
2.rgba( ): 0 ~ 1
注: 可以让指定的样式透明，而不影响其他样式
3.cursor : 手势
default: 默认箭头
要实现自定义手势:
准备图片: .cur、.ico

<style>
        #div1{ width: 100px; height: 100px; background: red; opacity: 0.5;}
        #div2{ width: 100px; height: 100px; background: rgba(255,0,0,0.5);
             /* cursor: pointer; */
             cursor : url( ./img/cursor.ico),auto;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <p>这是一个段落</p>
    <div id="div2">这又是一个块</div>
</body>

二十三、最大最小宽高

min-width、max-width
min-height、max-height
注 : 强化对百分比单位的理解
%单位: 换算 -> 以父容器的大小进行换算
一个容器怎么适应屏幕的高: 容器加height: 100%；body: 100%；html: 100%；
html，body{ height:100%；}
.contrainer{ height: 100%；}

<style>
        /* div{ width: 200px; max-height: 200px; border: 1px red solid;} */
        body{ height: 500px;}
        /* #box1{ width: 200px; height: 200px; background: red;} */
        #box1{ width: 200px; height: 100%; background: red;}
        #box2{ width: 100%; height: 80%; background: blue;}
    </style>
</head>
<body>
    <!-- <div>
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
    </div> -->
    <div id="box1">
         <div id="box2"></div>
    </div>
</body>

二十四、css默认样式

有些标签有默认样式，有些标签没有默认样式。
没有默认样式:
div、span、···
有默认样式:
body、h1···h6、p、ul、···
body -> marign : 8px
h1 -> margin : 上下 21.440px
font-weight : bold
p -> margin : 上下 16px
ul -> margin : 上下 16px
padding: 左 40px
默认点: list-style : disc
a -> text-decoration: underline；

二十五、css重置样式

简单的CSS reset

 *{ margin: 0; padding: 0;}
 优点:
 缺点:稍微的影响性能
 ul{ list-style: none;}
 a{ text-decoration: none; color: #666;}
 img{ display: block;}
 问题的现象: 图片跟容器底部有一些空隙。
 内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
 vertical-align: baseline; 基线对齐方式，默认值
 vertical-align: bottom; 解决方式是推荐的

写具体页面的时候或一个布局效果的时候:
1.写结构
2.css重置样式
3.写具体样式

<style>
        /* ul{ list-style: none;}
        a{ text-decoration: none; color: #999;}
        a:hover{ text-decoration:underline; color: red;} */
        div{ border: 1px black solid;}
        /* img{ vertical-align: baseline;} */
        /* img{ vertical-align: bottom;} */
        img{ display: block;}
    </style>
</head>
<body>
    <!-- <div>这是一个块</div>
    <span></span>
    <h1></h1>
    <ul>
        <li></li>
    </ul>
    <a href="#">这是一个链接</a> -->
    <div>
        <img src="./img/2.jpg" alt="">
    </div>

二十六、float浮动概念及原理

文档流
文档流是文档中可显示对象在排列时占用的位置
float特性
加浮动的元素，会脱离文档流，会延迟容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float的取值
left
right
none(默认)

<style>
        body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: yellow; float: left;}
        #box2{ width: 200px; height: 200px; background: red; float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

二十七、float注意点整理

float注意点:
1.只会影响后面的元素
2.内容默认提升半层
3.默认宽根据内容决定
4.换行排列
5.主要给块元素添加，但也可以给内联元素添加

ul{ margin: 0; padding: 0; list-style: none; width: 300px;
             height: 300px; border: 1px black solid;}
        li{ width: 100px; height: 100px; background: red; 
            border: 1px yellow solid; box-sizing: border-box; float: left;}
        li:nth-of-type(1){ height: 120px;}
        li:nth-of-type(2){ height: 80px;}
        span:last-type{ float:right}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">庄达菲庄达菲庄达菲庄达菲</div>
    <div id="box4">这是一个没有宽度的块元素</div> -->
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
    </ul>
    <span>庄达菲</span><span>郭淼淼</span>
</body>

二十八、清除float浮动(上、下)

利用clear属性清除float浮动
(clear属性只会操作块标签，对内联标签不起作用)
嵌套排列:
1.固定宽高 : 不推荐，不能把高度固定死，不适合做自适应的效果。
2.父元素浮动: 不推荐，因为父容器浮动也会影响到后面的元素。
3.overfloat : hidden(BFC规范)，如果有子元素想溢出，那么会受到影响。
4.display : inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。
5.设置空标签: 不推荐，会多添加一个标签。
6.after伪类: 推荐，是空标签的加强版，目前各大公司的做法。
上下排列: clear属性，表示清除浮动的，left、right、both

<style>
        /* #box1{ width: 100px; height: 100px; background: red; float: left;}
        #box2{ width: 200px; height: 200px; background: blue; clear: left;} */
        /* #box1{ width: 100px; height: 100px; background: red; float: right;}
        #box2{ width: 200px; height: 200px; background: blue; clear: both;} */
        /* #box1{ width: 200px; height: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid; float: left;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid; overflow: hidden;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}*/
        /* #box1{ width: 200px; border: 1px black solid; display: inline-block;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
        .clear{ clear: both;} */
        #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
        .clear:after{ content: ''; clear: both; display: block;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
    <!-- <div id="box1">
        <div id="box2"></div>
        <div class="clear"></div>
    </div>
    庄达菲庄达菲 -->
    <div id="box1" class="clear">
        <div id="box2"></div>
        </div>
    郭淼淼郭淼淼
</body>

二十九、float制作页面小结构(上、下)

 <style>
        *{ margin: 0; padding: 0;}
        ul{ list-style: none;}
        img{ display: block;}
        a{ text-decoration: none; color: #666;}
        h1,h2,h3{ font-size: 16px;}
        .l{ float: left;}   
        .r{ float: right;}
        .clear:after{ content: ""; display: block; clear: both;}
        #main{ width: 366px; margin: 20px auto;}
        #main.title{ height: 23px; line-height: 23px; font-size: 12px; font-weight: bold; padding-left: 30px;
            background:url(./img2/bg_title.png) no-repeat 6px 4px , url(./img2/bg_line.png) repeat-x;}
        #main ul{ overflow: hidden; margin-top: 13px;}
        #main li{ margin-bottom: 22px;}
        #main .pc{ width: 99px; border: 1px solid #c8c4d3; margin-left: 5px;}
        #main .pc img{ margin: 2px;}
        #main .content{ width: 240px; margin-left: 13px;}
        #main .content h2{ font-size: 12px; line-height: 24px;}
        #main .content p{ font-size: 12px; line-height: 20px;}
    </style>
</head>
<body>
    <div id="main">
        <h2>外媒评论精选</h2>
        <ul>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img2/img.png" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
偏执的人.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Web前端基础知识整理（二）每天进步一点点
webbeizi的博客
07-02 156
1、Web中的常见攻击方式 跨站脚本攻击XSS XSS简单来说，就是在页面中植入恶意代码 防御XSS：坚决不要相信用户的任意输入，并过滤掉输入中的特殊字,比如script标签，保护cookie，对重要的cookie设置httpOnly，防止客服端通过document.cookie获得cookie。 sql注入 sql注入指的是攻击者向服务器提交恶意sql代码，导致源程序执行包含恶意代码的sql。 防止:客户端过滤特殊字符，在服务器中执行sql有关的操作时进行预处理。 跨站点伪造请求（CSRF） 什么是CSR
web前端学习2
m0_55990888的博客
02-04 915
前端第二节
Web3 技术初体验以及相关学习资料
风炫的博客
05-28 1086
一. 前言 作为一名技术博主，经常会关注一些推特，油管这样的社交平台，了解最新发生的技术。之前还不在意，但是今年以来，区块链相关的整个信息流是扑面而来，元宇宙，Web3，NFT相关新名词接踵而至，让我这个门外汉应接不暇。个人特别是3月份之后，几乎每次刷twitter都会看到区块链相关的推文，以至于我不得不开始学习和了解区块链相关的技术了。 非常可惜的是，目前区块链行业对简中互联网支持并不友好，几乎所有的文档都是英文的，所以如果想在加密行业有所成果，那么英语的水平还是至关重要的，值得一提的是，我去年终于通过了
【一步步一起学DApp开发】（四）web3.js 基本使用 | 连接geth | 创建web客户端
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
09-14 2631
概述 web3.js内部使用JSONRPC与geth通信。它把所有JSON-RPC API当作JavaScript API，也就是说，它不仅支持所有与以太坊相关的API，还支持与Whisper和Swarm相关的API。 相关链接 web3.js托管地址 web3.js文档 导入web3.js 为了在node.js中使用web3.js，可以在项目目录中运行npm install w...
web3.0学习入门6：web3.0开发入门
鹿鸣天涯
10-01 5396
Web 3.0 的概念是由以太坊联合创始人 Gavin Wood 在 2014 年提出的，指基于区块链的去中心化在线生态系统，它代表了下一代互联网时代。
Web前端第三课
weixin_42132959的博客
12-23 2081
列表 列表有三种：ul、ol、dl 无序列表： ul 就是英语unordered list. 无序列表的简写。 li 就是英语 list item , 列表项的意思。 Ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都可以放。 有序列表： ordered list 有序列表：ol 。 ol这个东西用的不多，如果想要表达顺序，大家一般也用ul 。 定义列表...
web前端学习框架图.png
04-01
这是2020版最全的web学习框架，博主自己绘图，希望对你有帮助，助你在前端学习路上一臂之力，欢迎大家下载收藏，觉着有帮助的欢迎留言哦
Web前端学习
08-29
在"Web前端学习"中，框架和库的使用也是重要部分。React是Facebook推出的JavaScript库，用于构建用户界面，特别适合大型单页应用。它引入了组件化开发理念，让代码更易于管理和复用。Vue.js是一个轻量级的框架，它的...
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
web前端学习路线图
02-28
web前端学习路线图
Web前端视频学习资料50G
06-01
Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习...
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 327
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
springmvc1
最新发布
benpaodeDD的博客
07-14 170
以前的servlet程序：
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 307
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 207
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Power Apps使用oData访问表数据并赋值前端
weixin_41850878的博客
07-14 233
console.log需要F12打开浏览器开发者工具查看。方法过滤数据时，你可以指定一个OData。方法成功的例子，它使用了OData。在使用OData查询语法通过。参数来限制返回的记录集。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 273
通过sm4对文件进行加解密，用户输入密码
ctfshow-web入门-文件上传（web166、web167）&（web168-web170）免杀绕过
Welcome To Myon'Blog !
07-11 884
查看源码，前端只让传 zip上传 zip 成功后可以进行下载随便搞一个压缩包，使用记事本编辑，在其内容里插入一句话木马：上传该压缩包，上传成功后点击下载文件，使用 burpsuite 抓包：我这里木马内容用的 request ，就在 get 里执行 ls 没什么问题，但是读取 flag 时识别有点问题，最好使用 post 请求，因此将请求方法改为 post ，将 file 的内容还原到上面。
Web 性能入门指南-1.2 分析在线零售 Web 性能及优化方向
weixin_43303603的博客
07-11 450
性能优化入门：分析是什么拖慢了你的页面速度，从图片和第三方到样式表和自定义字体，以及你可以采取哪些措施
Web前端开发：HTML5+CSS3+JavaScript
09-29
本文将对Web前端开发的内容进行详细的说明和总结，包括HTML5、CSS3和JavaScript的学习笔记。 1. Web 1.1 浏览器 1.2 Web标准 1.3 HTML - HTML语法规范 1.4 HTML基本结构标签 1.5 网页开发工具：VS Code - 史...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值