HTML学习笔记 CSS文本及字体及连接及列表(a标签使用及缩进) 案例 第七节 （原创）参考使用表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本及字体及连接及列表</title>
<link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<p style="color: brown;text-align: center">hello tzy</p>
<!--颜色 居中-->
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p id="p1">this is web page</p>
<p id="p2">This is wEb pAge</p>
<p id="p3">tHis is wEb page</p>
<p id="p4">this is web page</p>
<p class="p5">测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
<p class="p5">this is web pagethis is web pagethis is web pagethis is web pagethis is web pagethis is web page</p>
<p style="font-family: fantasy;font-size: 40px">拉拉</p>
<a href="http://www.baidu.com">测试a标签百度</a>
<p>看一看效果</p>
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
<p>看一看效果</p>
<ul class="ul1">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
<p>看一看效果</p>
<ul clas="ul2">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</body>
</html>
h1 {
text-indent: -2em;
/*首行退进2字符*/
padding: 2em;
/*首行缩进2字符*/
}
p {
padding: 2em;
}
#p1 {
text-transform: capitalize;
/*首字母大写*/
}
#p2 {
text-transform: lowercase;
/*全部小写*/
}
#p3 {
text-transform: uppercase;
/*全部大写*/
}
#p4 {
/*阴影效果 居左 居上 清晰度小清 颜色*/
text-shadow: 20px 20px 0px #FF00FF;
}
.p5 {
width: 40px;
text-wrap: normal;
/*自动换行 不会拆分英文*/
}
/*@font-face {*/
/*font-family: myfont;*/
/*src: url(字体地址);*/
/*}*/
/*div{*/
/*font-family: myfont;*/
/*引用自己的下载的字体,用户可以直接使用，安全性还需改进*/
/*}*/
a:link{
color: red;
/*未被点击*/
text-decoration: none;
/*取消下划线*/
}
a:visited{
color: blue;
/*已被点击*/
}
a:hover{
color: darkgreen;
/*鼠标划过*/
}
a:active{
/*正在点击*/
color: aqua;
font-size:80px;
/* 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。*/
}
ul li{
/*list-style-type: georgian;*/
/*//修改li前的标记图片*/
list-style-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504976310558&di=4a7378a8e142317c61a6e16bb2f02ee7&imgtype=0&src=http%3A%2F%2Fimg.90sjimg.com%2Finspiration%2F03%2F98%2F74%2F62%2F70%2Fs_236_cl3486OMaFk6pRgdPO43.gif");
/*设置li图片*/
}
.ul1{
list-style-position: inside;
/*离屏幕左边远一点*/
}
.ul2{
list-style-position: outside;
/*离左边屏幕近一些*/
}
HTML学习笔记 CSS文本及字体及连接及列表(a标签使用及缩进) 案例 第七节 （原创）参考使用表的更多相关文章
- HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- amazeui学习笔记--css（常用组件5）--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
- HTML 学习笔记 CSS样式（字体）
css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- amazeui学习笔记--css（常用组件1）--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
随机推荐
- Qt实现基本QMainWindow主窗口程序
这个实验用Qt实现基本QMainWindow主窗口 先上实验效果图 打开一个文件,读取文件类容 详细步骤: 1.打开Qt creator新建MainWindow工程 右键工程名添加新文件,mai ...
- 再起航，我的学习笔记之JavaScript设计模式27(链模式)
链模式 概念介绍 链模式(Operatc of Responsibility): 通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用.从而简化对该对象的多个方法的多次调用时,对该对象的 ...
- 2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest, qualification stage (Online Mirror, ACM-ICPC Rules, Teams Preferred)
题目链接:http://codeforces.com/problemset/problem/847/I I. Noise Level time limit per test 5 seconds mem ...
- angualrJs清除定时器
angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里 ...
- Oracle 之——子查询 DDL DML 集合 及其他数据对象
Oracle 学习笔记(二) 知识概要: 1.子查询 2.集合操作 3.DML语句操作 4.其他数据库对象 1.子查询 查询工资比SCOTT高的员工信息 1 select * 2 from emp ...
- ServletListener对象学习笔记
JavaWeb学习笔记--监听器详解 知识概要: 1.监听器下例子举例 2.Servlet规范中的监听器 3. 4. 1. 监听器下例子举例说明: /* Frame:事件源.发生事件的对象 Windo ...
- 从源码看 angular/material2 中 dialog模块 的实现
本文将探讨material2中popup弹窗即其Dialog模块的实现. 使用方法 引入弹窗模块 自己准备作为模板的弹窗内容组件 在需要使用的组件内注入 MatDialog 服务 调用 open 方法 ...
- Python开篇
一:Python的前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为 ...
- migo的增强
migo的增强 所用BADI:MB_MIGO_BADI 具体见例子:(SE19) CIN_PLUG_IN_TO_MIGO JVA_CRP_MIGO_BADI JV_CRP_MIGO_BADI WB ...
- mysql在cmd命令下执行数据库操作
windows+r 运行cmd命令,执行以下操作! 当mysql 数据库文件相对于来说比较大的时候,这个时候你可能在正常环境下的mysql中是导入不进去的,因为mysql数据库本身就有默认的导入文件大 ...