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 ...
随机推荐
- 如何使用windows版Docker并在IntelliJ IDEA使用Docker运行Spring Cloud项目
如何使用windows版Docker并在IntelliJ IDEA使用Docker运行Spring Cloud项目 #1:前提准备 1.1 首先请确认你的电脑是windows10专业版或企业版,只有这 ...
- Mysql连接报错:1130-host ... is not allowed to connect to this MySql server如何处理
这个问题是因为在数据库服务器中的mysql数据库中的user的表中没有权限(也可以说没有用户),下面将记录我遇到问题的过程及解决的方法. 在搭建完LNMP环境后用Navicate连接出错 遇到这个问题 ...
- spring框架总结(03)重点介绍(Spring框架的第二种核心掌握)
1.Spring的AOP编程 什么是AOP? ----- 在软件行业AOP为Aspect Oriented Programming 也就是面向切面编程,使用AOP编程的好处就是:在不修改源代码的情 ...
- 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境
转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...
- JDownload: 一款可以从网络上下载文件的小程序第四篇(整体架构描述)
一 前言 时间过得真快,距离本系列博客第一篇的发布已经过去9个月了,本文是该系列的第四篇博客,将对JDownload做一个整体的描述与介绍.恩,先让笔者把记忆拉回到2017年年初,那会笔者在看Unix ...
- django使用xlwt导出excel文件
这里只是mark一下导出的方法,并没有做什么REST处理和异常处理. 维护统一的style样式,可以使导出的数据更加美观. def export_excel(request): # 设置HttpRes ...
- 自动化双向数据绑定AngularJs---入门
前 言 AngularJS,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为 ...
- javaScript基础的基础
JavaScript是一个脚本语言,需要有宿主文件,他的宿主文件是HTML文件. 与JAVA没有直接关系 一般写在 1.head里面 2.body里面 3.</html>后面 一般写在&l ...
- Java基础机试题
package day8;import java.util.Scanner;/** * Java基础机试题 * @author:lyrand * */public class convert { ...
- ubuntu6.04下安装Eclipse for C/C++ Development
ubuntu6.04下安装Eclipse for C/C++ Development 首先安装gcc/g++ 需要安装jdk,有的可以尝试安装openjdk. sudo apt-get install ...