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集合的常用功能 能够使用迭代器对集合 ...
随机推荐
- Netty4.x中文教程系列(六) 从头开始Bootstrap
Netty4.x中文教程系列(六) 从头开始Bootstrap 其实自从中文教程系列(五)一直不知道自己到底想些什么.加上忙着工作上出现了一些问题.本来想就这么放弃维护了.没想到有朋友和我说百度搜索推 ...
- impala+hdfs+parquet格式文件
[创建目录]hdfs dfs -mkdir -p /user/hdfs/sample_data/parquet [赋予权限]sudo -u hdfs hadoop fs -chown -R impal ...
- java 学习笔记--mybatis 三剑客(mybatis)
Java项目中使用Mybatis入门程序 wanna 关注 2017.03.23 14:33* 字数 270 阅读 1243评论 0喜欢 5 MyBatis 是支持定制化 SQL.存储过程以及高级映射 ...
- jsp有哪些内置对象？作用分别是什么？（至少三个）
jsp有哪些内置对象?作用分别是什么?(至少三个) 解答: 1)request表示HttpServletRequest对象.它包含了有关浏览器请求的信息,并且提供了几个用于获取cookie, head ...
- datagrid加分组后的效果
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAd8AAADdCAIAAAB13e+wAAAZgElEQVR4nO2d/28b533Hn7+APxnYgL ...
- 一步一步安装Git控件版本工具
Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git的读音为/gɪt/.Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.[2 ...
- iOS --转载 NSRange 和 NSString 详解
一.NSRange 1.NSRange的介绍 NSRange是Foundation框架中比较常用的结构体, 它的定义如下: typedef struct _NSRange { NSUInteger l ...
- C/C++程序内存分配详解
一.常见的几个区 1.栈区(stack)程序运行时由编译器自动分配,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.程序结束时由编译器自动释放. 2.堆区(heap)在内存开辟另一块 ...
- Django中的过滤器
Django 过滤器 过滤器 描述 示例 upper 以大写方式输出 {{ user.name | upper }} add 给value加上一个数值 {{ user.age | add:”5” ...
- 编写高质量代码--改善python程序的建议（七）
原文发表在我的博客主页,转载请注明出处! 建议三十四:掌握字符串的基本用法 编程有两件事,一件是处理数值,另一件是处理字符串,在商业应用编程来说,处理字符串的代码超过八成,所以需要重点掌握. 首先有个 ...