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集合的常用功能 能够使用迭代器对集合 ...
随机推荐
- ubox及日志管理
ubox是openwrt的帮助工具箱,位于代码package/system/ubox下, CMakeLists.txt kmodloader.c log/ lsbloader.c validate/ ...
- 安装php WampServer之后，运行的时候报错“phpMyAdmin - 错误 缺少 mysqli 扩展。请检查 PHP 配置。”
今天在安装了WampServer2.1a-x32之后,点击WampServer的图标启动WampServer,在电脑右下角就可以看到WampServer启动之后的图标,然后点击“Start All S ...
- hdu6069 Counting Divisors 晒区间素数
/** 题目:hdu6069 Counting Divisors 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6069 题意:求[l,r]内所有数的k次方 ...
- [Python基础]Python文件处理小结
1. 文件的打开与关闭 <1>打开文件 在python,使用open函数,可以打开一个已经存在的文件,或者创建一个新文件 open(文件名,访问模式) 示例如下: f = open('te ...
- yum安装的JDK的没有配置环境变量但是在/usr/bin下面都做了软链接
[root@st152 /usr/bin]# ll |grep javalrwxrwxrwx 1 root root 22 Nov 28 22:14 java -> /et ...
- jsp页面form表单提交时候乱码
1.问题描述: 表单提交中文乱码问题,怎么解决 2.原因 当表单传输到服务器上时,服务器会将传输的数据进行编码(iso-8859-1),然后当我们从服务器上面取数据的时候,就会出现乱码 3.解决的方式 ...
- COCOS2D-HTML5 开发之二】cocos2d-html5项目定义成员,局部变量,函数笔记随笔
本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos2d- ...
- Centos7安装Apache Http服务器无法访问如何解决
1. 安装Apache组件 [root@mycentos shell]# yum install httpd 2. 安装成功后,检测有无httpd进程 [root@mycentos shell]# p ...
- Easyui控制combotree只能选择叶子节点
$(function() { $('#tt').combotree({ url: 'getTree.do', onBeforeSelect: function(node) { if (!$(this) ...
- DevExpress 控件使用技巧
DevExpress是非常主流的.NET控件,眼下全世界和中国都用非常多用户使用,只是因为是英文版,初次接触的同学可能会认为困难.这里就总结DevExpress常见的10个使用技巧. 1.TextEd ...