网站建设域名是什么,东莞网络科技营销,免费注册网站空间,深圳罗湖企业网站推广目录
12-Overflow
13-下拉菜单
14-提示框
14.1 显示位置#xff08;左右#xff09;
14.2 显示位置(上下)
14.3 添加箭头
14.4 淡入效果
15-图片
16-列表
17-表格
17.1 表格宽度和高度
17.2 文字对齐
17.3 表格颜色
18-计数器
19-导航栏
19.1 导航栏UI优化
…目录
12-Overflow
13-下拉菜单
14-提示框
14.1 显示位置左右
14.2 显示位置(上下)
14.3 添加箭头
14.4 淡入效果
15-图片
16-列表
17-表格
17.1 表格宽度和高度
17.2 文字对齐
17.3 表格颜色
18-计数器
19-导航栏
19.1 导航栏UI优化
19.2 社会实践 12-Overflow overflow 属性用于控制内容溢出元素框时显示的方式。 注:overflow 属性只工作于 指定高度的块 元素上。 注: 在 OS X Lion ( Mac 系统) 系统上滚动条默认是隐藏的使用的时候才会显示 (设置 overflow:scroll 也是一样的)。 headstyle#OverflowVis {width: 200px;height: 100px;background-color: aquamarine;}#OverflowScroll {width: 200px;height: 100px;margin-left: 240px;background-color: rebeccapurple;overflow: scroll;}/style
/headbodydiv idOverflowVisp这是OverflowVis你滚滚试试撒。/pp这是OverflowVis你滚滚试试撒。/p......./divdiv idOverflowScrollp这是OverflowScroll你滚滚试试撒。/pp这是OverflowScroll你滚滚试试撒。/p......./div
/body13-下拉菜单 创建一个鼠标移动上去后显示下拉菜单的效果。
headstyle/* 下拉按钮样式 */.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}/* 容器 div - 需要定位下拉内容 */.dropdown {position: relative;display: inline-block;}/* 下拉内容 (默认隐藏) */.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}/* 下拉菜单的链接 */.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}/* 鼠标移上去后修改下拉菜单链接颜色 */.dropdown-content a:hover {background-color: #f1f1f1}/* 在鼠标移上去后显示下拉菜单 */.dropdown:hover .dropdown-content {display: block;}/* 当下拉内容显示后修改下拉按钮的背景颜色 */.dropdown:hover .dropbtn {background-color: #3e8e41;}/style
/headbodydiv classdropdownbutton classdropbtn下拉菜单/buttondiv classdropdown-contenta href1-规则.html1-规则/aa href2-创建.html2-创建/aa href4-背景.html4-背景/aa href5-文本.html5-文本/a/div/div
/body14-提示框
headstyle.tip{position: relative;display: inline-block;border-bottom: 1px dotted black;margin-top: 200px;margin-left: 200px;}.tip .tiptext {visibility: hidden;/* 隐藏 */width: 200px;background-color:blueviolet;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;/* 11-定位 */position: absolute;z-index: 1;}.tip:hover .tiptext {visibility: visible;/* 显示 */}/style
/headbodydiv classtip 鼠标你过来呀span classtiptext哎呀呀呀提示框文本/span/div/body/html14.1 显示位置左右 .tip .tiptext {padding: 5px 0;top: -5px;right: 105%; }top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距padding是 5px。 右侧left:105%; 左侧right: 105%; 14.2 显示位置(上下) .tip .tiptext {top: 100%;left: 50%; margin-left: -100px; }使用 margin-left 属性并设置为 -100px。 这个数字计算来源是使用宽度的一半来居中对齐即 width/2 (200/2 100)。 居中对齐left: 50% 。 顶部top: 100%; 底部bottom: 100%; 14.3 添加箭头 .tip .tiptext::after {content: ;position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent blueviolet transparent;}border-width 属性指定了箭头的大小 border-color 用于将内容转换为箭头。 箭头向上border-color: transparent transparent blueviolet(紫色) transparent; 箭头向左border-color: blueviolet(紫色) transparent transparent transparent; 其他略 14.4 淡入效果 使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果。 .tip .tiptext {......opacity: 0;transition: opacity 2s;}.tip:hover .tiptext {visibility: visible;/* 显示 */opacity: 1;}15-图片
headstylediv.img {margin: 5px;border: 3px solid #f40606;float: left;width: 400px;}div.img:hover {border: 3px solid #04ef6e;}div.img img {width: 100%;height: auto;}div.desc {padding: 15px;text-align: center;}/style
/headbodydiv classresponsivediv classimga target_blankhrefhttps://profile-avatar.csdnimg.cn/f9c3e04cbd4546c6be3442fdf4140b12_g984160547.jpg!1img srchttps://profile-avatar.csdnimg.cn/f9c3e04cbd4546c6be3442fdf4140b12_g984160547.jpg!1alt图片文本描述 width300 height200/adiv classdesc这里添加图片文本描述/div/div/div....
/body图像透明度 div.img {opacity:0.4;}div.img:hover {opacity:1.0;}opacity 属性值从0.0 - 1.0。值越小使得元素更加透明。 16-列表 在 HTML中有两种类型的列表 无序列表 ul - 列表项标记用特殊图形如小黑点、小方框等 有序列表 ol - 列表项的标记有数字或字母 使用 CSS可以列出进一步的样式并可用图像作列表项标记。
headmeta charsetutf-8title列表/titlestyleul.a {list-style-type:circle;}ul.b {list-style-type:square;}ol.c {list-style-type:upper-roman;}ol.d {list-style-type:lower-alpha;}/style
/headbodyp无序列表实例:/pul classali北京/lili上海/lili广州/lili深圳/li/ulul classbli北京/lili上海/lili广州/lili深圳/li/ulp有序列表实例:/pol classcli北京/lili上海/lili广州/lili深圳/li/olol classdli北京/lili上海/lili广州/lili深圳/li/ol
/body图像作列表项标记 ul.e {list-style-image:url(src/bg.png);list-style-type: none;padding-left: 150px;}p 图像列表实例:/p ul classeli北京/lili上海/lili广州/lili深圳/li/ul17-表格 borderth和th元素的边框(粗细 线条 颜色)。 border-collapse边框是否被折叠成一个单一的边框或隔开
headmeta charsetutf-8title表格/titlestyletable {border-collapse: collapse;/* 折叠边框 */}table,th,td {border: 1px solid coral;}/style
/headbodytabletrth姓名/thth班级/thth学号/th/trtrtd嬴政/tdtd二班/tdtd001/td/trtrtd刘邦/tdtd二班/tdtd002/td/trtrtd刘秀/tdtd三班/tdtd003/td/tr/table
/body有点拥挤有点丑咱们再优化一下。
17.1 表格宽度和高度 table {width:100%;}th{height:50px;}td{height: 40px;}width和height属性定义表格的宽度和高度。 table width:100%; 按百分比设置表格宽度 th/td height:50px/40px; 指定单元格具体高度 17.2 文字对齐 text-align 属性设置水平对齐方式向左右或中心。 vertical-align 属性设置垂直对齐方式顶部底部或中间。 td{height: 60px;text-align: right;vertical-align: bottom;}17.3 表格颜色 /* 表格线条颜色 */table,th,td {border: 1px solid coral;}......th{height:50px;background-color: blueviolet; /* 表头背景色 */color: white;}td{height: 60px;text-align: center;background-color:cadetblue;/* 内容背景色 */color: white;}18-计数器 计数器通过一个变量来设置根据规则递增变量。 CSS 计数器使用到以下几个属性 counter-reset创建或者重置计数器 counter-increment递增变量 content插入生成的内容 counter() 或 counters() 函数将计数器的值添加到元素 要使用 CSS 计数器得先用 counter-reset 创建 嵌套计数器可用于注册协议/或结合列表使用。 stylebody {counter-reset: section;}p {counter-reset: subsection;}h1::before {counter-increment: section;content: 第 counter(section) 条;}p::before {counter-increment: subsection;content: counter(section) . counter(subsection) ;}/styleh1头衔/h1pCSDN博客砖家-帅次/pp华为云享砖家-帅次/pp软件设计师(中级)/ph1中午吃啥呀/h1p兰州国际/pp全球沙县/pp华中菜饭/p19-导航栏 导航栏无处不在还是需要熟练使用的。导航条基本上是一个链接列表。 ullia href/Users/scc/Qianduan/css/1-规则.html博客/a/lilia href/Users/scc/Qianduan/css/2-创建.html下载/a/lilia href4-背景.html学习/a/lilia href5-文本.html知道/a/li/ul接下来我们删除边距和列表前小标志 styleul {list-style-type: none;margin: 0;padding: 0;}/style移除列表前小标志(list-style-type:none)。一个导航栏并不需要列表标记。 移除浏览器的默认设置将边距和填充设置为 0。 19.1 导航栏UI优化 alink - 代表当一段文本为链接时的属性。 avisited - 代表这段文本被点击之后的属性。 ahover - 代表鼠标指针放在这个链接上时的属性。 aactive - 代表鼠标按下时一瞬间的属性。 a:link,a:visited {display: block;color: #FFFFFF;background-color: #eb0b0b;width: 120px;text-align: center;padding: 4px;text-decoration: none;text-transform: uppercase;}a:hover,a:active {background-color: #0395e9;}19.2 社会实践 ul {list-style-type: none;margin: 0;padding: 0;width: 20%;background-color: #f5f5f5;position: fixed;height: 100%;overflow: auto;}div stylemargin-left:20%;padding:1px 16px;height:100%;h2帅次/h2h3CSDN博客专家华云云享专家专注Android开发多年分享一些你需要的小知识点/h3h2HTML介绍/h2pHTML 英文全称 HyperText Mark-up Language , 中文名称是 超文本标记语言 。是一种用于创建网页的标准标记语言。它使用一系列标签来描述网页内容的结构和样式包括段落、标题、链接、图片、列表等。HTML文档是由HTML元素组成的这些元素可以嵌套在其他元素中从而构建出复杂的网页结构。/ppHTML5是HTML的最新版本相比之前的版本它引入了许多新的元素和API使得网页可以更好地支持多媒体内容、图形和动画等。此外HTML5还提供了更多的表单控件和数据绑定功能使得用户可以更方便地与网页进行交互。/pp更多内容/p......p更多内容/p/div width: 20%; - 宽度 20%。 height: 100%; - 高度全屏。 background-color: #f5f5f5; - 背景色 position: fixed; - 固定定位 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动 叮已入门。
相关推荐
HTML 入门手册(一)
HTML 入门手册(二)
CSS 入门手册(一)
