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 ...
随机推荐
- Vuex 学习笔记
Vuex 是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.由于SPA应用的模块化,每个组件都有它各自的数据(state).视图(view)和方法(actions),当项目内容越 ...
- C++ 虚函数 、纯虚函数、接口的实用方法和意义
也许之前我很少写代码,更很少写面向对象的代码,即使有写多半也很容易写回到面向过程的老路上去.在写面向过程的代码的时候,根本不管什么函数重载和覆盖,想到要什么功能就变得法子的换个函数名字,心里想想:反正 ...
- C++格式化输出的好东西
s = FormatFloat("0.######", d); 最多保留6位s = FormatFloat("0.000000", d); 始终保留6位s = ...
- JSP入门 导出文件
1.图片校验码 <img src="captcha.jpg" /> web.xml配置 <servlet> <servlet-name& ...
- uva1267 Network
https://vjudge.net/problem/UVA-1267 题意: 有一棵树,上面有一个放着水源的点s,给出一个数k,这个水源可以覆盖路径长度到s不超过k的叶子节点.现在需要把所有的叶子节 ...
- 天上掉Pizza
天上掉Pizza 时间限制: 3 Sec 内存限制: 128 MB提交: 73 解决: 48[提交][状态][讨论版] 题目描述 明明喜欢Pizza,但总是缺钱.有一天,他在报纸上阅读,他最喜爱的 ...
- apache一个IP一个端口对应多个域名
一个IP一个端口对应多个域名: NameVirtualHost XXX.XXX.XXX.XXX:80 <VirtualHost XXX.XXX.XXX.XXX:80> ServerAdmi ...
- Python系列之内置函数
内置函数 一.数学运算类: abs(a):求绝对值如果参数是个复数则返回复数的模. a = abs(-1) print(a) >>>1 compilex([real[, imag]] ...
- Unity3D - Animator Controller循环依赖
问题 假设有2个Animator Controller,分别命名为TestControllerLhs.controller以及TestControllerRhs.controller.在TestCon ...
- Echarts数据可视化polar极坐标系,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...