python16_day12【html、css】
一、HTML
所有HTML标签操作
<!DOCTYPE html>
<html lang="en">
<head>
<!--编码-->
<meta charset="UTF-8">
<!--title-->
<title>EEOEDU</title>
<!--5秒后跳转百度-->
<!--<meta http-equiv="refresh" content="5; url=http://www.baidu.com"; >-->
<!--网站关键字搜索-->
<meta name="keywords" content="开发者,教育" />
<!--网站描述-->
<meta name="description" content="....xxxxx....." />
<!--IE最新的引擎去渲染HTML,兼容IE-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
<!--头部图标-->
<link rel="shortcut icon" href="favicon.ico" /> </head>
<body>
<!--块级标签-->
<h1>h1</h1>
<div></div> <!--内联标签-->
<a>a b</a>
<span>span</span> <!--p标签-->
<p>this is a p <br> ....</p>
<p>this is a p</p> <!--a标签 跳转,重定向,锚-->
<a href="http://www.eeo.cn" target="_blank">eeo.cn</a> <!--锚
<a href="#c1">第一章</a>
<a href="#c2">第二章</a>
<a href="#c3">第三章</a> <div id="c1" style="height: 700px; background-color: gray">
content one
</div> <div id="c2" style="height: 700px; background-color: palevioletred">
content two
</div> <div id="c3" style="height: 700px; background-color: green">
content three
</div> --> <!--h1~6
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6> --> <!--列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul> <ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol> <dl>
<dt>标题一:</dt>
<dd>1</dd>
<dd>1</dd>
<dd>1</dd>
<dt>标题二:</dt>
<dd>1</dd>
<dd>1</dd>
<dd>1</dd>
</dl> --> <!--表格
<table border="1">
<thead>
<tr>
<th>序号</th>
<th colspan="2">主机名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>c1.com</td>
<td>80</td>
</tr>
<tr>
<td>2</td>
<td>c2.com</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2">c3.com</td>
<td>80</td>
</tr>
<tr>
<td>4</td>
<td>81</td>
</tr>
</tbody>
</table> --> <!--label点击文件,自动选中input-->
<div>
<label for="user">用户名:<input id="user" type="text" /></label>
密码:<input type="text" />
</div> <!--框-->
<fieldset>
<legend>login:</legend>
username:<input type="text">
password:<input type="password">
</fieldset> <!--A标签和img-->
<a href="http://www.eeo.cn">
<img src="2.jpg" alt="tom" title="i am tom ,choice me...">
</a> <!--表单-->
<form action="http://192.168.12.120:8000/index/" method="POST" enctype="multipart/form-data">
username:<input type="text" name="username" placeholder="请输入内容"/>
<br>
email:<input type="email" name="email">
<br>
password:<input type="password" name="password">
<!--单选框 name一样才会相排斥-->
<div>
<input type="radio" name="gender" value="1" checked="checked">男
<input type="radio" name="gender" value="2">女
</div> <!--多选框-->
<div>
<input type="checkbox" name="hobby" value="11" checked="checked"/>学习
<input type="checkbox" name="hobby" value="12" />运动
<input type="checkbox" name="hobby" value="12" />户外
</div> <!--文件上传-->
<div>
<input name="tofile" type="file">
</div> <!--select选择-->
<div>
<select name="city">
<option vlaue="bj">北京</option>
<option vlaue="sh" selected="selected">上海</option>
<option vlaue="ss">沙河</option>
</select>
<br>
<select name="city2" multiple>
<option value="bj">bj</option>
<option value="sh" selected="selected">sh</option>
<option value="ss" selected="selected">ss</option>
</select>
</div> <!--文字块-->
<div>
<textarea name="memo">默认值</textarea>
</div> <input type="submit" value="submit提交">
<input type="button" value="button提交">
<input type="reset" value="重置">
</form>
</body>
</html>
二、CSS
1.普通CSS例子
/*普通CSS*/
.sb{
color: white;
background-color: green;
font-size: 16px;
height: 20px;
width: auto;
/*background: url(2.jpg) no-repeat 0 0;*/
} <div class="sb">sb want say</div>
2.大图中选图标
/*背景选择,挖洞*/
.c1{
background: url(5.png) no-repeat -110px -106px;
height: 30px;
width: 30px;
}
</style> <div class="c1"></div>
3.选择器
<style>
/*ID选择器*/
#wc{ }
/*属于选择器*/
input[type=text]{ }
/*类选择器*/
.c1{ }
/*标签选择器*/
a{ } /*组合选择器, div下面p标签*/
div p{ }
/*组合选择器, 找一层,儿子层*/
.c1 > p span{ }
/*鼠标放上面的变化*/
.c1:hover{ } /*相排斥时,优先生效*/
.c1{
color: gray !important;
} </style>
4.display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.show{
color: red;
font-size: 30px;
} .hide{
display: none;
} </style>
</head>
<body>
<input type="button" value="showme" onclick="showdiv();">
<input type="button" value="hideme" onclick="hidediv();">
<div id="i1" class="show hide">this test</div> <script>
function showdiv(){
document.getElementById('i1').classList.remove('hide')
} function hidediv() {
document.getElementById('i1').classList.add('hide')
}
</script>
</body>
</html>
5.边框
<style>
.c2{
background-color: #dddddd;
border-left: 3px solid transparent;
}
.c2:hover{
border-left: 3px solid red;
}
</style> <!--边框一-->
<div style="height: 100px; border: 1px solid red"></div>
<!--边框二-->
<div style="background-color: #dddddd; border-left: 3px solid red">搜索数据</div>
<!--边框三-->
<div class="c2">搜索数据</div>
6.边距padding and margin
<style>
#i1{
/*外边距*/
margin: 50px;
background-color: rebeccapurple;
color: white;
} #i2{
/*内边距*/
padding: 50px;
background-color: rebeccapurple;
color: white;
}
</style> <div id="i1">bizi</div>
<div id="i2">bizi</div>
7.位置position
<style>
.tip{
position: fixed;
bottom: 300px;
right: 0;
}
.ab{
position: absolute;
bottom: 10px;
right: 0;
}
.rel{
position: relative;
height: 300px;
width: 300px;
background-color: rebeccapurple;
}
.abs{
position: absolute;
top: 0;
right: 0;
}
</style> <div class="rel">
<div>
<!--absolute碰到relative就生效,定位在上一级相对位置-->
<div class="abs">ttttt</div>
</div>
</div> <div style="background-color: #dddddd; height: 2000px;"></div> <!--fixed永远固定在那个位置,通常用在广告挂件-->
<div class="tip">返回顶部fixed</div>
<!--如果没有遇到relative则根据滚屏变动-->
<div class="ab">返回顶部absolute</div>
8.模态对话框
<style>
.hide{
display: none;
} .mid{
position: fixed;
background-color: black;
top:0;
left: 0;
right: 0;
bottom: 0;
z-index: 98;
opacity: 0.5;
}
.modal{
height: 300px;
width: 400px;
background-color: green;
position: fixed;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -150px;
z-index: 99;
}
</style> <div>
<input type="button" value="display" onclick="showDiv();" />
<div>aaaaaaaaaaaaaa</div>
</div> <div id="i2" class="mid hide"></div>
<div id="i1" class="modal hide">
<input type="button" value="cacel" onclick="hideDiv();"/>
</div> <script>
function showDiv(){
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
} function hideDiv(){
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
}
</script>
9.行高line-height
body{
margin: 0;
}
.menu{
background-color: #396bb3;
color: white;
height: 44px;
/*行高,行间的距离*/
line-height: 44px;
}
<body>
<div class="menu">
<a>菜单一</a>
<a>菜单二</a>
<a>菜单三</a>
</div>
<div class="menu" style="background-color: blue;height: 44px;line-height: 44px;">
老男人
</div>
10.float漂浮
<div class="menu" style="background-color: #dddddd">
<div style="float: left">内容一</div>
<div style="float: right">内容二</div>
<!--没有这句就漂没了,需要拉回来-->
<div style="clear: both"></div>
</div>
<div class="menu" style="background-color: blue; height: 30px">
<div style="float: left">内容一</div>
<div style="float: right">内容二</div>
<!--没有这句就漂没了,需要拉回来; 或者为父DIV设置height-->
<!--<div style="clear: both"></div>-->
</div>
11.居中
<div class="menu" style="background-color: blue;height: 44px;line-height: 44px;text-align: center">
老男人
</div>
12.综合布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.w{
/*background-color: gray;*/
color: red;
width: 980px;
margin:auto; }
.pg-header{
height: 44px;
background-color: #396bb3;
color: white;
line-height: 44px;
} .pg-header .w a{
display: inline-block;
text-decoration: none;
padding: 0 10px;
}
.pg-header .w a:hover{
background-color: #8eb030; }
.left{
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">test
<div class="menus left">
<a href="#">menu1</a>
<a href="#">menu2</a>
<a href="#">menu3</a>
</div>
<div class="menus right">
<a href="#">login</a>
<a href="#">register</a>
</div>
</div>
</div> <!--body-->
<div class="pg-body">
<div class="w">
内容
</div>
</div>
</body>
</html>
布局
python16_day12【html、css】的更多相关文章
- JavaWeb【一、简介】
原计划上周完成的内容,硬是过了一个清明拖到了这周,工作上还有很多东西没做...明天抓紧看把,争取这周末搞定 内容简介:(学习完后会重新梳理调整) 1.JavaWeb[一.简介] 2.JavaWeb[二 ...
- Python全栈【进程、线程】
Python全栈[进程.线程] 本节内容: 进程 线程 协程 I/O多路复用 进程 1.进程就是一个程序在一个数据集上的一次动态执行过程,进程是资源分配的最小单元. 2.进程一般由程序.数据集.进程控 ...
- 【Collection、泛型】
[Collection.泛型] 主要内容 Collection集合 迭代器 增强for 泛型 第一章 Collection集合 1.1 集合概述 集合:集合是java中提供的一种容器,可以用来存储多个 ...
- JavaSpring【一、概述】
主要内容 JavaSpring[一.概述] JavaSpring[二.IOC] JavaSpring[三.Bean] JavaSpring[四.Bean管理注解实现] JavaSpring[五.AOP ...
- JavaJDBC【一、概述】
其实这个内容在学习java基础的时候就有看过了,只是没有详细整理,在这再整理一下 数据库操作对于任何一门后端语言来说都是很重要的 JDBC:Java Data Base Connectivity 内容 ...
- Java注解【一、概述】
前面几篇Java学习笔记都是半夜写的,比较伤身体,今天开始想调整生物钟,早上起来学2小时,看看能坚持多久 本周目标: 1.JavaJDBC使用 2.JavaWeb编程 3.Java框架基础(反射+注解 ...
- Java反射【一、概述】
.net也使用过反射,不过用的比较浅显,用来记日志等.. Java基础课程学习已经过了一段时间了,接下来继续学习 本次学习包含以下内容 Java反射[一.概述] Java反射[二.Class类的使用] ...
- 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
- 01 语言基础+高级：1-6 集合_day02【Collection、泛型】
day02[Collection.泛型] 主要内容 Collection集合 迭代器 增强for 泛型 教学目标 能够说出集合与数组的区别 说出Collection集合的常用功能 能够使用迭代器对集合 ...
随机推荐
- windows7常用操作命令
1.打开命令行 按住Windows键加R键,打开运行窗口 2.打开笔记本 运行窗口中输入:notepad,点击确定或回车,打开记事本工具 主要作用:浏览网页时,看到一些有用的话,那么你是怎么把它记录下 ...
- 在linux下安装配置rabbitMQ详细教程
在linux下安装配置rabbitMQ详细教程 2017年12月20日 17:34:47 阅读数:7539 安装Erlang 由于RabbitMQ依赖Erlang, 所以需要先安装Erlang. Er ...
- 一个共通的viewModel搞定所有的分页查询一览及数据导出（easyui + knockoutjs + mvc4.0)
前言 大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了.其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多.所以我就想提取一些共通的东西出 ...
- JavaWeb——过滤器
过滤器简介 WEB过滤器是一个服务器端的组件,它可以截取用户端的请求与相应信息,并对这些信息过滤. 过滤器的工作原理和生命周期 在没有Web过滤器的情况下,用户直接访问服务器上的Web资源.但是如果存 ...
- 【BZOJ】3296: [USACO2011 Open] Learning Languages（tarjan）
http://www.lydsy.com/JudgeOnline/problem.php?id=3296 显然,每群能交流的群是个强联通块 然后求出scc的数量,答案就是scc-1 #include ...
- mac 干掉Dashboard
打开终端,输入下面的命令: defaults write com.apple.dashboard mcx-disabled -boolean YES 然后再重启一下 Dock,在终端输入 kill ...
- 【Python】求素数-稍加优化
print 'Find prime number smaller then input number \n' print 'Please input a number:' import datetim ...
- Android实例-多窗口的切换
Android实例-多窗口的切换 1.图片一是程序运行后的界面. 2.图片二是点击"非模态显示"的界面. 3.图片三是点击"模诚显示"的界面(提示平台不支持). ...
- Poj3087
Shuffle'm Up Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8842 Accepted: 4077 Desc ...
- ajax 传递数组类型参数后台接收不到的问题
在做排序功能的时候需要将一个数组的数据传递到后台,(当时怎么没用json,如果用json就没有那么多的事情了),数据提交采用ajax! 先看代码 js: submitbtn: function () ...