CSS

最新推荐文章于 2024-01-15 00:00:00 发布
最新推荐文章于 2024-01-15 00:00:00 发布
阅读量240 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wu_zz/article/details/57082561
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<!--link rel="stylesheet" href="1.css" type="text/css" /-->

<style type="text/css">
/*@import url(1.css);

div{
		background-color:#09F;
		color:#FFF;
}
.haha{
	background-color:#FF3;
	color:#0C0;
}*/
/*预定样式，实现动态的加载。
.hehe{
	background-color:#C93;
	color:#00F;
}*/
/*
#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
	background-color:#000;
	color:#FFF;
}
*//*
span b{关联选择器 选择器中的选择器
	background-color:#09F;
	color:#FFF;
}
*/

/*组合选择器*/
/*
.haha,div b{对多种选择器进行相同样式定义
	background-color:#000;
	color:#C00;
}
*/
/*
伪元素

超链接的状态。

*/

/*未访问*/
a:link{
	background-color:#06F;
	color:#FFF;
	text-decoration:none;
	font-size:18px;
}


/*
鼠标悬停
*/
a:hover{
	background-color:#FFF;
	color:#F00;
	font-size:24px;
}


/*点击效果*/
a:active{
	background-color:#000;
	color:#FFF;
	font-size:36px;
}

/*访问后效果*/

a:visited{
		background-color:#FF9;
		color:#000;
		text-decoration:line-through;
}


p:first-letter{
		font-size:36px;
		color:#F00;
}

div:hover{
		background-color:#F00;
		color:#FFF;
}

input:focus{
	background-color:#09F;
}


#qq{
	float:left;
}
/*

L  V  H  A

*/
</style>

</head>

<body>


<input type="text" />
<input type="text" />
<hr />

<a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>

<hr />

	<!--
    css和html相结合的第一种方式。
    1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。 
    2，使用style标签的方式。 一般都定义在head标签中
    
    
    优先级：
    标签选择器<类选择器<id选择器<style属性
    
    -->

		<div id="qq">这是一个div<b>区域</b>1</div>
		<div class="haha" id="qq">这是一个div区域2</div>
		<span>span<b>区域</b>1</span>
		<span class="haha">span区域2</span>
		<p>这是一个段落1</p>
		<p class="haha">这是一个段落2</p>

</body>
</html>
======================================================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

ul{
	list-style-type:none;
	list-style-image:url(1.bmp);
	
}
table{
		border-bottom:#0C0 double 3px;
		border-left:#F00 solid 3px;
		border-right:#FF0 dashed 3px;
		border-top:#0C0 groove 3px;
		width:500px;

}

table td{
		border:#0CF  dotted 1px;
		padding:20px;
		
}

div{
	border:#F90 dashed 2px;
	height:200px;
	width:400px;
}

input {
	border:none;
	border-bottom:#000 1px solid;

}
.haha{
		border:none;
}
</style>
</head>

<body>


姓名：<input type="text"  />成绩：<input type="text"  />

<hr />
<div>div区域</div>

<hr />
<table>

	<tr>
    	<td><input type="text" class="haha" /></td>
        <td><input type="text" class="haha" /></td>
    </tr>
    <tr>
    	<td>单元格一</td>
        <td>单元格一</td>
    </tr>

</table>

<hr />

<ul>
	<li>无序项目列表</li>
	<li>无序项目列表</li>
    <li>无序项目列表</li>
    <li>无序项目列表</li>
</ul>


</body>
</html>
=========================================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
/*
body{
	margin:0px;
}
*/
div{
	border:#09F solid 1px;
	height:100px;
	width:200px;/**/

}

#div_1{
	/*border-bottom:#F60 2px dashed;*/
	background-color:#F90;
	/*padding:20px 100px 200px 300px;上 右 下 左
	margin:0px;*/
	float:left;
}
#div_2{
	background-color:#0CF;
	float:left;
	
}
#div_3{
	background-color:#3F0;8
	clear:left;/**/
	
}
	
</style>

</head>

<body>

<div id="div_1">
第一个盒子11第一个盒子11
</div>
<div id="div_2">
第二个盒子22
</div>
<div id="div_3">
第三个盒子33
</div>



</body>
</html>
=================================================================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
/*
body{
	margin:0px;
}
*/
div{
	border:#09F solid 1px;
	height:100px;
	width:200px;/**/

}

#div_1{
	/*border-bottom:#F60 2px dashed;*/
	background-color:#F90;
	/*padding:20px 100px 200px 300px;上 右 下 左
	margin:0px;*/
	float:left;
}
#div_2{
	background-color:#0CF;
	float:left;
	
}
#div_3{
	background-color:#3F0;8
	clear:left;/**/
	
}
	
</style>

</head>

<body>

<div id="div_1">
第一个盒子11第一个盒子11
</div>
<div id="div_2">
第二个盒子22
</div>
<div id="div_3">
第三个盒子33
</div>



</body>
</html>
=====================================================================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

#imgtext{
		border:#06F dashed 1px;
		width:180px;
}
#img{
		float:right;
}
#text{
		color:#F60;
		font-family:"华文隶书";
}
</style>

</head>

<body>

<div id="imgtext">
    <div id="img">
    	<img src="9.bmp" />
    </div>
    <div id="text">
    	这是一个美女，说明文字。
    	一切尽在不言中。哇
        ！这是一个美女，说明文字。
    	一切尽在不言中。哇！
        这是一个美女，说明文字。
    	一切尽在不言中。哇！
    </div>
</div>
</body>
</html>
===============================================================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

#text{
		font-family:"华文隶书";
		font-size:24px;
		
		position:absolute;
		top:80px;
		left:10px;
}


#imgtext{
		border:#F60 dotted 1px;
		width:500px;
		position:absolute;
		top:100px;
}
</style>

</head>

<body>

<div id="imgtext">
<div id="img">
<img src="1.jpg" height="300" width="500" />
</div>
<div id="text">
花丛中的美女，我的！
</div>
</div>
</body>
</html>

wu_zz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 样式优先级
08-04 2万+
什么是CSS优先级？
css投影
weixin_41824429的博客
10-08 6675
css投影
CSS表格
m0_57774967的博客
04-24 5597
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS 阴影效果
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
CSS——rem
qq_48613863的博客
04-09 2万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
CSS——less
qq_48613863的博客
04-09 8667
1、less简述 less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。 在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。 Less是一个CSS预处理器, Less文件后缀是.less； 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力； 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CS
CSS遮罩层
weixin_44282093的博客
07-19 9301
css遮罩层
28个炫酷的纯CSS特效动画示例（含源代码）
大剑师兰特的GIS世界
01-15 2万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
CSS中 设置( 单行、多行 )超出显示省略号
热门推荐
明天也要努力的博客
12-05 13万+
css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。 思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本 说明
【CSS】滚动条样式详解
NineWaited的博客
08-21 4万+
浏览器设置滚动条样式详解
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
bootstrap.min.css
02-23
用于渲染前端静态页面
CSS Tutorial
06-20
CSS Basic CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Styling Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box Model CSS Box ...
bootstrap.css
01-27
bootstrap的css文件
大学物理-章节PPT！
最新发布
07-22
大学物理-章节PPT！
将当前路径下的doc或者docx转化为doc/docx
07-22
将该脚本放在要转化doc/docx的路径下，执行
量子位：2023 AIGC算力全景与趋势报告(1).pdf
07-22
量子位：2023 AIGC算力全景与趋势报告(1).pdf
无水印视频素材，可以用于剪辑，制作PPT等办公场景,烟花系列6个,冬季系列4个,日落黄昏4个,山水系列9个等等
07-22
您正在寻找一系列专业级的视频素材，这些素材不仅无水印，而且适用于各种创意工作，包括视频剪辑和PPT制作。我们精心策划并提供了一系列精选的视频素材，旨在满足您在不同办公场景下的需求。 烟花系列：6个独特的视频片段，捕捉了烟花绽放的瞬间，无论是庆祝活动还是节日庆典，这些素材都能增添光彩。 车流系列：1个动态的车流视频，展现城市夜晚的活力，适合用作背景或过渡效果，营造现代都市感。 城市系列：1个展示城市天际线的视频，适合作为商业演示或旅行宣传片的背景，传递都市生活的节奏。 创意系列：1个富有创意的视频，适合激发灵感，适用于广告或个人项目，增加作品的原创性。 倒计时系列：1个倒计时视频，适用于正式场合或倒计时活动，简洁明了地传达时间流逝的紧迫感。 冬季系列：4个冬季主题的视频，涵盖雪景、冰晶等元素，适合季节性主题的创作。 科技系列：1个科技感强烈的视频，适合科技公司的宣传材料或未来主义风格的项目。 日落黄昏系列：4个日落时分的宁静画面，适合创造浪漫或怀旧氛围的视觉叙事。 山水系列：9个自然风光视频，包括山脉、湖泊和瀑布等壮丽景色，适合环境保护主题或自然美景展示 这些素材均经过精心挑选，确保高品
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值