CSS实例【十一】

最新推荐文章于 2024-08-05 16:40:12 发布
最新推荐文章于 2024-08-05 16:40:12 发布
阅读量131 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yogurt_sweets/article/details/118057334
版权

因为有的小例子涉及到其他内容，所以在写后续的例子，我可能注释了前面的样式和元素，有需要可以去掉注释看～

<!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了，下周就工作满一年了，总要有点收获。
今天看了一个大佬的文章，慢慢正能量，忽然觉得之前自己浪费了很多时间，那是生命啊～继续努力！

虾尾丸子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3-制作特殊字体效果
代号006
08-15 751
基于CSS3文本阴影属性text-shadow制作火焰效果与霓虹效果的字体。
css ------笔记相关案例
sumuqi的博客
04-23 193
css 图片案例 01 css语法.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red } h2{ color...
CSS中使用特殊字体
weixin_40151813的博客
01-20 689
@font-face { font-family: fzhcjt; src: url("../../../src/assets/font/fzhcjt.ttf"); font-weight: normal; font-style: normal; } span{ font-family: 'fzhcjt'; } 到Google Web Fonts和Dafont.com下载.t...
CSS伪元素
冷月醉雪的博客
08-22 269
把文本的第一个字母设为特殊的字母 &lt;!DOCTYPE html &gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;style &gt; p:first-letter { col
CSS3 设置特殊字体的方法@font-face
MtangEr的博客
12-26 813
问题： 在开发过程中我们经常在设计图 中看到一些特殊字体，这些字体并不是系统自带的字体，那要怎么引用特殊字体呢？？ 兼容性 ： IE9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体. 注意： IE 8 及更早IE版本不支持@font-face 规则. 简单上手的使用过程： 1.先看文件放置位置，这里fon...
CSS 笔记/案例
weixin_46396363的博客
03-23 331
一、CSS简介 1、什么是CSS css:Cascading Style Sheet 是一组样式设置规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观的美化 布局和定位 2、基本用法 1、CSS语法 <head> <style> 选...
报错fatal: remote error: The unauthenticated git protocol on port 9418 is no longer supported.
yogurt_sweets的博客
03-17 5292
初始化项目的时候， 把svn没传的node_modules复制粘贴过去后， npm i 报错fatal: remote error: The unauthenticated git protocol on port 9418 is no longer supported. git config --global url."https://".insteadOf. git:// error: key does not contain variable name: url.https://.insteadOf
前端面试逻辑题
yogurt_sweets的博客
08-27 859
今天视频面试，面试官给我出了一道逻辑题。第一道是编程以及编程工具有关的，因为个人接触项目经验比较少，所以面试官很贴心的换了另外一个给我。题目如下： 有八个小球,一个天平,有一个比较重,怎样最快找到质量最重的那个？ 我稍微想了一下，给出第一个答案：对半取，4个为一组，找到重的一侧再取两个一组，继续对半称。一共三轮。 很显然，这不是最优答案，面试官让我再想想看有没有更好一点的方案。我又思考了一下，说： 如果重的小球质量足够重的话，可设一个阈值，那就4个一组对半称以后，抓去重的一侧往另外一侧天平盘里抓小球，根据阈
快速删掉node_modules
yogurt_sweets的博客
07-08 577
如何快速有效删除node_modules
JavaScript基础，来自“菜鸟教程”JavaScript实例练习【一】
yogurt_sweets的博客
06-03 295
“菜鸟教程”中的JavaScript实例练习，从前往后对应，编辑器用的HBuilderX，新建项目，在项目下新建.js文件，在里面加代码就可以运行啦～ <h1>first点击按钮，绑定事件，时间函数显示时间</h1> <button onclick="displayDate()">按钮</button> <script> function displayDate(){ document.getElementById("demo
【git常用指令，及远程库拉取代码步骤】
最新发布
yogurt_sweets的博客
08-05 208
git常用指令及从远程库拉取代码步骤
JavaScript基础，来自“菜鸟教程”JavaScript实例练习【三】
yogurt_sweets的博客
06-07 182
叮！今日份更新，新鲜出炉～ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高级JavaScript实例</title> <script> function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays
CSS实例【一】
yogurt_sweets的博客
06-17 173
哈喽，html更完，开始更css的内容了，端午节回来写的马上更新： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h1{ background-color: aquamarine; color: #2756fe; } p{ background-color: #ff9a49;
JavaScript基础，来自“菜鸟教程”JavaScript实例练习【二】
yogurt_sweets的博客
06-03 147
接上篇，加油啊小丸子！ <h1>eleventh,带参数的函数</h1> <p>函数语法function functionName(parameters) {执行的代码},functionName必须。指定了函数的名称。函数名称可以包含字母，数字，下划线， 和美元符号（变量命名规则也是如此），parameters可选。指定一个或多个参数名，多个参数可用英文逗号(,)隔开。函数在调用时会接收真正的值。在函数内，参数是局部变量。注意： 如果调用函数时未指定参数，为指定参数
HTML实例【一】
yogurt_sweets的博客
06-09 134
今天在写JavaScript应用实例的时候遇到点问题，发现css还不太熟，html也一块学一下。我用hbuilderx发现轮播图的效果一直出不来，只是图片堆积，但是在菜鸟的在线工具上却可以，母鸡原因～各位大佬有知道原因的吗？？ <h1>1、HTML基础</h1> <h1>标题</h1> <h2>标题</h2> <h3>标题</h3> <h4>标题</h4> <h
CSS实例【三】
yogurt_sweets的博客
06-17 126
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p.serif{font-family: "times new roman",times,serif;font-size: 200%;font-style: normal;} p.sansserif{font-family: Arial, Helvet
CSS实例【十二】
yogurt_sweets的博客
06-22 109
最后一波CSS基础内容 来了～ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* home和next用了同一个图的不同位置 */ img.home{ width:46px; height: 44px; background:url(image/sun.gif) 0 0;
CSS实例【二】
yogurt_sweets的博客
06-17 106
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h1{ text-align: center; text-decoration: overline; } h2{ text-decoration: line-through; } h3{ text-decoratio
css实例
05-28
好的，下面是一个使用CSS样式设计的实例。这是一个图片墙网页，包含多个图片，鼠标悬停时图片会有放大和变暗的效果。 ```html <!DOCTYPE html> 图片墙 body { margin: 0; padding: 0; background...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值