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的官方地址去下载 ...
随机推荐
- Abaqus压电材料分析
目录 1. ABAQUS压电材料定义[快速版] 2. 压电材料的主要特性参数 3. Abaqus 压电分析 1 电响应 2 initial condition & BCs 4 Load 5 M ...
- 【Matlab】基于KDtree的最近邻搜索和范围搜索
摘要:介绍Matlab的rangesearch()函数和knnsearch()函数. rangesearch() -- 根据给定k-维数据集,返回指定距离范围内的所有数据点 knnsearch() - ...
- Web前端入门第 14 问：HTML 语义化是什么？
HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. 语义化:通俗地说,就是让机器可以理解编写出来的 HTML 代码.比如:搜索引擎.屏幕阅读器等. 非语义化写法 网 ...
- mongodb 用户权限管理配置
mongodb 权限字段详情 user 字段,为新用户的名字: pwd 字段,用户的密码: cusomData 字段,为任意内容,例如可以为用户全名介绍: 超级用户的 role 有两种,userAdm ...
- gin解决CORS跨域问题
直接设置跨域参数 新建 cors 文件 package cors import ( "time" "github.com/gin-contrib/cors" & ...
- Joker 前端框架组件的生命周期：深度解析与实践应用
在 Joker 前端框架的开发体系中,组件的生命周期犹如一颗精准的导航星,指引着开发者构建高效.稳定且富有交互性的应用程序.它完整地涵盖了从组件实例诞生的那一刻起,直至其完成使命被销毁的全过程,每一个 ...
- 查看Linux防火墙状态
环境:VMware.CentOS8从centos7开始使用systemctl.firewalld来管理服务和程序,包括了service和chkconfig.防火墙状态:systemctl status ...
- 面试题-计算机网络-HTTP部分
前言 计算机网络2-HTTP部分的题目,是我根据Java Guide的面试突击版本V3.0再整理出来的,其中,我选择了一些比较重要的问题,并重新做出相应回答,并添加了一些比较重要的问题,希望对大家起到 ...
- 【SpringMVC】RESTful CRUD
RESTful CRUD REST:即 Representational State Transfer.(资源)表现层状态转化.是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方 ...
- .NET Core & ConsoleApp & appsettings.json
准备 Visual Studio 2017 .NET Core 2.1 新建控制台应用(.NET Core) 默认的 Program.cs // Program.cs using System; na ...