因为有的小例子涉及到其他内容,所以在写后续的例子,我可能注释了前面的样式和元素,有需要可以去掉注释看~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* link未访问;visited已访问;hover鼠标移动到连接上;active鼠标点击时 */
/* a:link {color: #000000;text-decoration: none;}
a:visited {color: #d500a9;}
a:hover {color: #00adf0;font-size: 150%;text-decoration: underline;}
a:active {color: #f2be00;background-color: #00ADF0;}
input:focus
{
background-color: yellow;
} */
/* p:first-child
{
color: blue;
} */
/* p里的第一个i */
/* p > i:first-child
{
color: #008000;
} */
/* 第一个p里的所有i(注意修饰词是修饰谁的,i没有修饰词就是all) */
/* p:first-child i
{
color: #FF0000;
}
p:first-letter
{
color: #16B8D2;
font-size: xx-large;
}
p:first-line
{
color: #e31000;
font-variant: small-caps;
}
h3::before{
content:url(11.png);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li
{ */
/* 列表项里的float,对列表水平/竖直方向浮动有根本性影响 */
/* float: right;
}
a:link,a:visited
{
display: block;
padding: 4px;
color: white;
background-color: #4CAF50;
font-weight: 300;
text-decoration: none;
text-align: center;
width: 80%;
}
a:hover,a:active
{
background-color: #9adc9e;
} */
/* div.img{
margin: 0.3125rem;
border: 1px solid #dcd8de;
float: left;
width: 180px;
height: 200px;
}
div.img:hover{
border: 0.0625rem solid black;
}
div.img img{
width: 100%;
height:auto; */
/* opacity设置img的透明度,经常和hover一块使用 */
/* opacity: 0.4; */
/* alpha设置透明度, 适用 IE8 及其更早版本 */
/* filter:alpha(opacity=40);
}
div.img img:hover{
opacity: 1;
}
div.desc{
padding: 15px;
text-align: center;
}
*/
div.background{
width: 500px;
height: 250px;
background: url(./11.png) repeat;
border: 2px solid black;
}
div.transbox{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #FFFFFF;
border: 1px solid black;
opacity: 0.6;
filter:alpha(opacity=60);/* For IE8 and earlier */
}
div.transbox p{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!-- <h1>一、CSS伪类</h1>
<h2>1.添加不同颜色的超链接</h2>
<p><b><a href="//www.baidu.com/" target="_blank">百度链接</a></b></p>
<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
<h2>2.给链接加点其他样式(见上)</h2>
<h2>3.使用焦点</h2>
<form action="demo-form.php" method="get">
Frist name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
</form> -->
<!-- <h2>4.:first-child-匹配了第一个p元素(此项需要注释掉其他所有内容,包括h,然后才实现,母鸡原因~)</h2> -->
<!-- <p>This is a girl.</p>
<p>This is a girl.</p>
<h2>5.:first-child-匹配了p元素中的第一个i元素</h2>
<p>I am a <i>strong</i> man.I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man.I am a <i>strong</i> man.</p> -->
<!-- <h2>6.:first-child-匹配了第一个p元素中的所有i元素(此项also需要注释掉其他所有内容,包括h,然后才实现,母鸡原因~)</h2> -->
<!-- <p>I am a <i>strong</i> man.I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man.I am a <i>strong</i> man.</p> -->
<!-- <h2>7.使用:lang(见css10)</h2>
<h1>CSS 伪元素</h1>
<h2>1.把文本的第一个字母设为特殊字母(p:first-letter)</h2>
<p>用 "first-letter" 伪元素向文本的首字母设置特殊样式</p>
<h2>2.把第一行文字设置为特殊</h2>
<p>可以使用“first-line”伪元素向文本设置特殊格式</p>
<h2>3.在一个元素之前(后)插入一些内容</h2>
<h3>The :before pseudo-element inserts content before an element.</h3>
<h1>CSS 导航栏</h1>
<h2>垂直导航栏的全样式</h2>
<ul>
<li><a href="#主页">主页</a></li>
<li><a href="#新闻">新闻</a></li>
<li><a href="#关于">关于</a></li>
</ul>
<br>
<br>
<h1>CSS图片廊(详细版)</h1>
<div class="responsive">
<div class="img">
<a target="_blank" href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.layui.com%2Favatar%2F54267528.jpg%3Ft%3D1584703923649&refer=http%3A%2F%2Fcdn.layui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626686796&t=2fe783bb98e36530f7ee76f9948615c3">
<img src="//gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.layui.com%2Favatar%2F54267528.jpg%3Ft%3D1584703923649&refer=http%3A%2F%2Fcdn.layui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626686796&t=2fe783bb98e36530f7ee76f9948615c3" alt="图片"/>
</a>
<div class="desc">这里是图片描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F3d3bbb5626df7c0a52b0e665eea40a45dde19b051b795-9m8Sul_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626686796&t=bf57abbe3bba4d32c6424e08d5eb7fd0">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F3d3bbb5626df7c0a52b0e665eea40a45dde19b051b795-9m8Sul_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626686796&t=bf57abbe3bba4d32c6424e08d5eb7fd0" alt="图片"/>
</a>
<div class="desc">这里是图片描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.lsgdkzx.com%2Fuploads%2Fi_3849299870x82529265_26.jpg&refer=http%3A%2F%2Fi.lsgdkzx.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626686796&t=d5ad83883fc93be3042f3eb5667dbfe1">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.lsgdkzx.com%2Fuploads%2Fi_3849299870x82529265_26.jpg&refer=http%3A%2F%2Fi.lsgdkzx.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626686796&t=d5ad83883fc93be3042f3eb5667dbfe1" alt="图片"/>
</a>
<div class="desc">这里是图片描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Farticle-fd.zol-img.com.cn%2Ft_s998x562c5%2Fg5%2FM00%2F0A%2F02%2FChMkJltpVKGIQENcAAKaC93UFtUAAqi5QPdcOwAApoj403.jpg&refer=http%3A%2F%2Farticle-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626686796&t=16ff1e36b87f9a63dcb5912dea263dd7">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Farticle-fd.zol-img.com.cn%2Ft_s998x562c5%2Fg5%2FM00%2F0A%2F02%2FChMkJltpVKGIQENcAAKaC93UFtUAAqi5QPdcOwAApoj403.jpg&refer=http%3A%2F%2Farticle-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626686796&t=16ff1e36b87f9a63dcb5912dea263dd7" alt="图片"/>
</a>
<div class="desc">这里是图片描述</div>
</div>
</div> -->
<h1>CSS图像的不透明度</h1>
<h2>1.创建透明图像-鼠标悬停效果(见上图片廊)</h2>
<h2>2.创建一个背景图像与文本的透明框</h2>
<div class="background">
<div class="transbox">
<p>这些文本在透明框里</p>
</div>
</div>
</body>
</html>
实例中引用了一些百度链接中的图片,如有侵权,请联系删除~
css也快写完了,这一周也过完了
写完css会继续尝试解决js应用实例的那个问题,可能会继续更新js应用实例,也可能是一些html5和css3的内容,然后就是css框架和js框架、vue了,下周就工作满一年了,总要有点收获。
今天看了一个大佬的文章,慢慢正能量,忽然觉得之前自己浪费了很多时间,那是生命啊~继续努力!