11.23CSS笔记
每一步的编写过程都在代码里面书写了，暂且记录下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" content="This is a meta data" name="dengyexun">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="home.html">
<style>
body { }
a:link{
color: burlywood;
text-decoration: none;
}
a:visited{
color: #FF0000;
text-decoration: none;
}
a:hover{
color: blueviolet;
text-decoration: underline;
}
a:active{
color: darkmagenta;
}
p.fix_pos {
font-family: SansSerif, 'Times New Roman';
font-size: 30px;
font-style: italic;
font-weight: bold;
position: fixed;
top: 300px;
right: 10px;
}
{# h1 {#}
{# color: cornflowerblue;#}
{# text-align: center;#}
{# }#}
#hcolor {
color: aquamarine;
letter-spacing: 2px;
text-align: center;
text-shadow: 2px 2px #FF0000;
}
a {
display: block;
width: 80px;
background-color: #98bf21;
}
#getIn {
height: 20px;
width: 100px;
background-color: burlywood;
}
ul.animal{
list-style-type: square;
}
ul.trans{
list-style-type: circle;
}
#info{
font-family: SansSerif;
width: 40%;
border-collapse: collapse;
}
#info td, #info th{
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#info th{
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom:4px;
background-color: #a7c942;
color: #ffffff;
}
#info tr.alt td{
color: #000000;
background-color: #eaf2d3;
} div.ex{
width: 220px;
padding: 10px;
border-top-style: groove;
border-right-style: solid;
border-bottom-style: groove;
border-left-style: solid;
margin: 5px;
outline: dotted green;
}
h2.left_pos{
position: absolute;
top: 50px;
left: 20px;
}
h2.right_pos{
position: relative;
right: 20px;
}
#clip_pic{
position: absolute;
clip: rect(30px,200px,200px,20px);
}
div.scroll{
background-color: gray;
width: 100px;
height: 180px;
overflow: scroll;
}
div.container{
width: 100%;
border: 1px solid gray;
margin:0px;
line-height: 150%;
}
div.header , div.footer {
padding: 0.5em;
background-color: gray;
clear: left;
color: white;
}
h1.header{
padding: 0px;
margin: 0px;
}
div.left{
float: left;
width: 180px;
margin: 1px;
padding: 1em;
}
div.content{
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
div.auto_center{
margin-left: auto;
margin-right: auto;
width: 70%;
}
div.left {
position: absolute;
left: 8px;
width: 100px;
}
a.wei:visited {
color: #98bf21;
}
p:first-line{
color: #98bf21;
font-family: SansSerif;
}
p:first-letter{
color: black;
font-size: x-large;
}
h1:before{
content: url("/static/img/dyx.png");
}
h1:after{
content:url("/static/img/dyx.png");
}
ul{
list-style-type: none;
margin: 10px;
padding: 0px;
}
</style>
</head>
<body> <input id="getIn" type="text" name="one"/>
<p class="fix_pos">This is a fixed position</p>
<script>
document.write('hello!')
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 class="left_pos">This is a relative position</h2>
<h2 class="right_pos">This is a relative position</h2>
<h2>This is a relative position</h2> <ul class="animal">
<li>cat</li>
<li>dog</li>
<li>pig</li>
</ul>
<ul class="trans">
<li>bike</li>
<li>car</li>
<li>plane</li>
</ul>
<table>
<tr>
<th>list_01</th>
<th>list_02</th>
<th>list_03</th>
</tr>
<tr>
<td>dog</td>
<td>cat</td>
<td>bird</td>
</tr>
<tr>
<td>flower</td>
<td>green</td>
<td>blue</td>
</tr>
</table>
<br> <table id="info">
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr class="alt">
<td>Brown</td>
<td>23</td>
<td>male</td>
</tr>
<tr>
<td>Alice</td>
<td>18</td>
<td>female</td>
</tr>
<tr class="alt">
<td>Bob</td>
<td>33</td>
<td>male</td>
</tr>
<tr>
<td>Tom</td>
<td>17</td>
<td>male</td>
</tr>
<tr class="alt">
<td>Jerry</td>
<td>18</td>
<td>female</td>
</tr>
<tr>
<td>King</td>
<td>5</td>
<td>male</td>
</tr>
</table> <div class="ex">
This is a temp
I like you
I would like to give you some colors see see!
</div> {# <img id="true_pic" src="/static/img/dyx.png" width="300" height="350" alt="this is a picture">#}
{# <img id="clip_pic" src="/static/img/dyx.png" width="300" height="300">#} <div class="scroll">
键盘上有3个指示灯,左边两个对应于常用的Num lock和Caps Lock键，想必大家都熟悉,下面为大家介绍对应最右边指示灯的Scroll Lock键：
Scroll Lock键最早出现在IBM的PC/XT机型的83键盘和AT接口的84键盘上，这个键不仅仅出现在PC机的101键盘上，连苹果机的“增强”型键盘上也加上了该按键。该键在DOS时期用处很大，由于当时显示技术，限制了屏幕只能显示宽25行、长80个字符的文字，在阅读文档时，使用该键能非常方便地翻滚页面。
</div> <span style="cursor: text">
text
</span>
<span style="cursor: alias">
alias
</span>
<span style="cursor: crosshair">
crosshair
</span>
<span style="cursor: inherit">
inherit
</span> <br>
<br>
<br>
<div class="container">
<div class="header"><h1 class="header">I am very sad yesterday and today!Because I lost my IDcard</h1> </div>
<div class="left">Don't be afraid! I can got it! you must love the life</div>
<div class="content">国家科技部国际合作科技项目评审专家；国家科技部人才留学评审专家；
国际国内学术期刊Neurocomputing, IEEE 会刊，中国科学E辑、自然科学进展、电子学报、软件学报、自动化学报等评审专家</div>
<div class="footer">Copyright 2017 by deng</div> </div> <br>
<div class="auto_center">
国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目评审专家
</div>
<br>
<br>
<a class="wei" href="show.html">点击</a>
<p>国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目<br>
评审专家国家科技部国际合作科技项目评审专家评审专家国家科技部国际合作科技项目评审专家</p>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">News</a></li>
<li><a href="home.html">Contact</a></li>
<li><a href="home.html">About</a></li>
</ul> </body>
</html>
11.23CSS笔记的更多相关文章
- Ｃ++11 学习笔记 std::function和bind绑定器
C++11 学习笔记 std::function和bind绑定器 一.std::function C++中的可调用对象虽然具有比较统一操作形式(除了类成员指针之外,都是后面加括号进行调用),但定义方法 ...
- C++11/14笔记
目录 语言层面 模板表达式中的空格 nullptr和std::nullptr_t 自动推导类型----auto 一致性初始化----Uniform Initialization 初始化列表(initi ...
- 11/6笔记 补充（Redis持久化，RDB&&AOF）
11/6补充笔记 修改redis-6379.conf里面的save10秒2个数据发生改变 (save 10 2) 修改一次数据不发生改变,修改2次数据才发生改变 继续修改数据,发现还是一样的规律 增删 ...
- iOS 阶段学习第11天笔记（OC基础知识）
iOS学习(OC语言)知识点整理 一.OC基础知识 1)#import 用于导入头文件,预处理阶段加载引用,只加载一次. 2)OC 依赖于Foundation框架下的头文件Foundation.h, ...
- C++11学习笔记
C++11 1.long long新类型 2.列表初始化 int t=0; int t={0}; int t(0); int t{0}; 注意:如果我们使用列表初始化有丢失信息的风险,则编译器报错 l ...
- linux0.11学习笔记（1）
公布软件包包括内容: bootimage.Z - 具有美国键盘代码的压缩启动映像文件: rootimage.Z - 以1200kB 压缩的根文件系统映像文件: linux-0.11.tar.Z- 内核 ...
- lesson - 11 课程笔记
一.sed 作用: sed 是一种流编辑器,它是文本处理中非常重要的工具, 能够完美的配合正则表达式使用.处理时,把当前处理的行存储在临时缓冲区中, 称为“模式空间(pattern space)”, ...
- C++11学习笔记（5） —— override and final （转）
原文转自 http://blog.csdn.net/fire_lord/article/details/8540592 1.简介 C++为我们提供了继承和虚函数的重写特性. 在派生类中,重写虚函数不强 ...
- 802.11学习笔记1-WIFI参数含义
研究下wifi参数的含义 #The word of "Default" must not be removed Default CountryRegion= CountryRegi ...
随机推荐
- iOS开发-UIImageView的contentMode属性
UIImageView 的contentMode这个属性是用来设置图片的显示方式,如居中.居右,是否缩放等,有以下几个常量可供设定:UIViewContentModeScaleToFillUIView ...
- 《转》Python学习(16)-python异常
转自 http://www.cnblogs.com/BeginMan/p/3171445.html 一.什么是错误,什么是异常,它们两者区别 这里解释如下:个人觉得很通俗易懂 错误是指在执行代码过程中 ...
- python框架---->BeautifulSoup的使用
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.一个人至少拥有一个梦想,有一个理由去坚强.心 ...
- document.visibilityState 监听浏览器最小化
document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器). do ...
- xmlWriter
MemoryStream msXml = new MemoryStream(); XmlTextWriter xmlWriter = new XmlTextWriter(msXml, Encoding ...
- makefile高级应用
https://www.zybuluo.com/lishuhuakai/note/206938 make是Linux下的一款程序自动维护工具,配合makefile的使用,就能够根据程序中模块的修改情况 ...
- Mavan学习之pom聚合
所有用Maven管理的真实的项目都应该是分模块的,每个模块都对应着一个pom.xml.它们之间通过继承和聚合(也称作多模块,multi-module)相互关联.那么,为什么要这么做呢?我们明明在开发一 ...
- HashRouter与BrowserRouter的异同
项目中控制路由跳转使用的是BrowserRouter 在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的. 原因: 在browserHistory ...
- LeetCode 17 Letter Combinations of a Phone Number （电话号码字符组合）
题目链接 https://leetcode.com/problems/letter-combinations-of-a-phone-number/?tab=Description HashMap< ...
- sencha touch 在安卓中横屏、竖屏切换 应用崩溃问题
答案来至于 Sencha Touch 交流 @周旭 这是由于横竖屏转换导致activity重跑onCreate方法导致的,有两种解决方案:1.横竖屏转换的时候不要重新跑onCreate方法,这个可以在 ...