css_初阶
s10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<fieldset>
<legend>登陆</legend>
<label for="username">用户名:</label>
<input id="username" type="text" name="user" value="alex">
<br>
<label for="Password">密码:</label>
<input id="Password"type="text" name="password">
<br>
<input type="reset" value="重置">
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>
s11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#i1{
background-color:#095bcc;
height: 58px;
}<!--id选择器-->
#i2{
background-color:#095bcc;
height: 58px;
}
#i3{
background-color:#095bcc;
height: 58px;
}
.c1{
background-color:#895ccc;
height: 18px;
}<!--class选择器-->
*/
/*div{*/
/*background-color:black;*/
/*color:white;*/
/*}<!--div标签选择器对所有的div标签都有效都会设置此样式-->*/
/*<css注释: /* */
/*span div {*/
/*background-color: blue;*/
/*color: #FFFFFF;*/
/*}*/
/*<!--*/
/*层级选择器用空格 span下的div标签有效-- >*/
/*#i4,#i5,#i6{*/
/*background-color: maroon;*/
/*color: black;*/
/*}<!--组合选择器用逗号-->*/
/*.i4,.i5,.i6{*/
/*background-color: lawngreen;*/
/*color: red;*/
/*}<!--组合选择器-->*/
.c2[n="jack"]{width: 100px;height: 100px }<!--属性选择器对选择到的标签再通过属性再进行一次筛选-->
<!--最常用的是class选择器，其次是标签选择器 id选择器可以不用-->
</style>
</head>
<body>
<div id="i1">a</div><!--id选择器-->
<div id="i2">b</div>
<div id="i3">c</div>
<div class="c1">ffff</div><!--syle属性背景颜色高度-->
<span class="c1">11<div>22</div></span><!--class选择器-->
<div class="c1">3</div>
<div id="i4">2233</div><!--id选择器-->
<div id="i5">dgdg</div>
<div id="i6">kkdlg</div>
<div class="i4">aaaaaaaaaaa</div>
<div class="i5"> bbbbbbbb</div>
<div class="i6">cccccccccc</div>
<input class="c2" n="jack" type="text">
<input class="c2" type="password">
</body>
</html>
s12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
font-size: 52px;
color: black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
<div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
<div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
<div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
</body>
</html>
<!--标签上 style优先，然后是编写顺序，下面的优先-->
commons.css
.c1{
background-color: red;
color: white;
}
.c2{
font-size: 52px;
color: black;
}
<!--stylesheet css文件可被引用-->
s13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tile</title>
<link rel="stylesheet" href="commons.css"><!--引用css文件-->
</head>
<body>
<div class="c1 c2" style="color: pink">ajsddiia</div>>
</body>
</html>
s14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red;"><!--边框像素为1像素实体的红色-->
<!--<div style="border-left:1px dotted red ;">dotted 虚线-->
ddfd
</div>
<div style="height: 48px;width:80% ;
color: red;
border:1px solid red;
font-size: 22px;
text-align: center;
line-height: 48px;
font-weight:bold;
">ddddddddddd</div>
<!--<width宽度可以设置占的屏幕显示百分比，但height不能设置占的百分比>-->
<!--<height: 48px;width:80% div高度和宽度>-->
<!--<color: red;div里字体颜色>-->
<!--<border:1px solid red;div加边框边框线粗1像素实体的边框线为红色>-->
<!--<font-size: 22px;div里字体大小>-->
<!--text-align: center;字体左右居中-->
<!--<line-height: 48px;等于height的像素高度 ;字体上下居中>-->
<!--<font-weight:bold;字体粗细>-->
</body>
</html>
s15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 20%;background-color: black;float: left">2</div>
</body>
</html>
<!--float让标签飘起来块级标签也可以堆叠起来-->
s16.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red;display: inline">assf</div>
<span style="background-color: red;display: block">ffff</span>
<span style="background-color: blue;height: 50px;width: 70px">Alex</span>
<a href="http://www.baidu.com" style="background-color: blue">Eric</a>
<span style="display: inline-block;background-color: blue;height: 50px;width: 70px">CCC</span>
</body>
</html>
<!--display: inline 块级标签变行内-->
<!--display: block 行内标签变块级-->
<!--display: inline-block 具有行内标签的特性(有多少占多少)，又可以设置高度宽度边距-->
<!--display:none 让标签消失-->
<!--行内标签无法设置高度宽度边距-->
<!--块级标签可以设置高度宽度边距-->
s17.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin:0 ">
<div style="border:1px solid red;height: 70px">
<div style="background-color: green;height: 50px;margin-top:0px "></div>
</div>
</body>
</html>
<!--<margin 外边距可以移到外面的边距>-->
<!--<body style="margin: 0 auto;" margin使用例子去掉上面边距>-->
s18.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 ;">
<div style="border: 1px solid red;height: 70px;">
<div style="background-color: green;height: 50px ;padding-top: 0px">asdfd</div>
</div>
</body>
</html>
<!--padding内边距里面 div填充颜色-->
<!--<body style="margin:0 auto;" margin使用例子去掉上面边距>-->
s19_作业.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header {
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto;"><!--style="margin: 0 auto 去掉上面那个缝隙-->
<div class="pg-header">
<div style="width: 860px;margin: 0 auto"><!--div里style放margin:0 auto div会居中-->
<div style="float: left">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div>
<div style="width: 860px;margin: 0 auto;">
<div style="float: left;">
log
</div>
<div style="float: right">
<div style="height: 50px;width: 100px;background-color: #888888"></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="background-color: red">
<div style="width: 860px;margin: 0 auto;">
asdad
</div>
<div style="clear: both"></div>
</div>
<div style="width: 300px;border: 1px solid red;"><!--div放的时候左边优先-->
<!--<div style="width: 300px;border: 1px solid red;"不设置高度，是为了让里面的div的高度占本div的高度百分之百>-->
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
<div style="clear: both;"></div><!--<div style="clear: both;"相当于div里面的div浮起来了，div又把里面的div拉起来了，重新显示父类div表格>-->
</div>
</body>
</html>
<!--margin: 0 auto 0表示距离上下边距是0 auto表示当前div左右自动居中-->
css_初阶的更多相关文章
- Nodejs初阶之express
PS: 2014/09/24 更新<Express 4.X 启航指南>,欢迎阅读和评论:) 老规矩,开头部分都是些自娱自乐的随想,想到哪写到哪... 到今天俺已经在俺厂工作俩年零几天了 ...
- R语言实战（一）介绍、数据集与图形初阶
本文对应<R语言实战>前3章,因为里面大部分内容已经比较熟悉,所以在这里只是起一个索引的作用. 第1章 R语言介绍 获取帮助函数 help(), ? 查看函数帮助 exampl ...
- 平衡树初阶——AVL平衡二叉查找树+三大平衡树（Treap + Splay + SBT）模板【超详解】
平衡树初阶——AVL平衡二叉查找树 一.什么是二叉树 1. 什么是树. 计算机科学里面的树本质是一个树状图.树首先是一个有向无环图,由根节点指向子结点.但是不严格的说,我们也研究无向树.所谓无向树就是 ...
- 重温ASP.NET WebAPI（一）初阶
重温ASP.NET WebAPI(一)初阶 前言 本文为个人对WebApi的回顾无参考价值.主要简单介绍WEB api和webapi项目的基本结构,并创建简单地webaapi项目实现CRUD操作. ...
- 《R语言实战》读书笔记--第三章 图形初阶（一）
3.1使用图形 可以使用pdf等函数将图形直接保存在文件中.在运用attach和detach函数的使用中经常出现错误,比如命名重复的问题,所以,应该尽量避免使用这两个函数. plot是一般的画图函数, ...
- UE4开发神秘海域类游戏原型 初阶（二）：动画资源的整合
前一篇已经确定神海类游戏原型的目标,首先要做的就是3C's(Character, Controls, Camera)的开发. UE4的3C's的程序部分开发主要也就是基于他的GamePlay Fr ...
- R语言—图像初阶
dev.new() 创建一个新图像之前打开一个新的窗口 win.graph() 同上 pch() 指定绘制点时使用的符号 cex() 指定符号的大小,是一个数值,表示绘图符号相当于默认大小的缩放倍数 ...
- QT 初阶 第二章 创建对话框（查找对话框实例）
最终效果图: 该对话框由三个文件组成:finddialog.h .finddialog.cpp. main.cpp 代码+注释 /*--finddialog.h--*/ #ifndef FINDDIA ...
- QT 初阶 1.3 节 控件的几何排列
#include "mainwindow.h" #include <QApplication> #include <QHBoxLayout> #includ ...
- Sublime Text 3初阶
本文主要介绍一些Sublime Text3的初级阶段,主要从最初的安装,到插件,还有主题这三个方面介绍,还会提到一些关于使用ST3的一些小小经验... 一:安装 首先进入sublime的官方地址去下载 ...
随机推荐
- [CF696B] Puzzles 题解
首先很好想到要用树形 \(dp\). 然后设 \(dp_i\) 为遍历到第 \(i\) 个点的期望时间,\(sz_i\) 代表 \(i\) 的子树大小. 发现有转移方程: \[dp_i=dp_{fa_ ...
- vue打印浏览器页面功能的两种实现方法
目录 方法一:通过npm 安装插件 方法二:手动下载插件到本地 总结 推荐使用方法二 方法一:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 ...
- Markdown 编写技巧汇总（二）
继续上篇汇总 附-上篇汇总,接着做更加高级一点的应用技巧. [1]列表与引言嵌套 两者嵌套,如: > 我是一行文本 > 1. 文本1 > 2. 文本2 > 1. 文本 > ...
- Scala Map集合
package com.wyh.day01 object ScalaMap { def main(args: Array[String]): Unit = { /** * 不可变Map * */ // ...
- PDManer 入门教程：超强代码生成工具！
PDManer 入门教程:超强代码生成工具!https://www.51cto.com/article/753161.html
- 一个ABAQUS model需要的Component
component of abaqus model Abaqus模型由几个不同的组件组成,它们共同描述了要分析的物理问题. a abaqus model 至少要有: discrete goemtry ...
- Selenium KPI接口 时间等待
常见的时间等待有三种: 固定.显示.隐士. 应用场景: 主要用于模拟真实的用户操作,有时时间过于短,页面响应不过来,从而造成元素定位不到. 使用格式: sleep(3):一般用于调试 implicit ...
- Netty基础—3.基础网络协议
大纲 1.网络基础的相关问题总结 2.七层模型和四层模型 3.物理层(网线 + 光缆 + 01电信号) 4.数据链路层(以太网协议 + 网卡mac地址) 5.网络层(IP协议 + 子网划分 + 路由器 ...
- uniapp 截屏扫码
最近开发功能遇到个需求,用户点击某个操作之后,需要截取当前屏幕内容,并扫码识别屏幕截图中的二维码,代码如下: 首先将代码抽离到外部文件中,以便复用: // 截图 export function tak ...
- [tldr]windows使用scoop安装make工具辅助程序编译
make是一个好用的GNU工具,用来辅助我们进行自动化的程序编译,只需要一个Makefile文件,即可实现一行指令自动编译 scoop是windows的一个包管理工具 安装 scoop bucket ...