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的官方地址去下载 ...
随机推荐
- GridControl 给选中的行添加边框显示
实现方式,通过自定义 RowControl 的样式实现. 参考:https://supportcenter.devexpress.com/ticket/list?searchString=RowCel ...
- 一文搞懂 APP 算法备案
今天来给大家好好科普一下超重要的 APP 算法备案,这可是和我们日常使用 APP 以及 APP 运营都息息相关的知识点哦! 什么是算法备案 简单来讲,算法备案就相当于 APP 运营者要把自家 APP ...
- DataX - [03] 使用案例
题记部分 001 || mysql2hdfs (1)查看MySQL被迁移的数据情况 (2)根据需求确定reader为mysqlreader,writer为hdfswriter 查看reader和wri ...
- 读论文-新闻推荐系统：近期进展、挑战与机遇的评述(News recommender system_ a review of recent progress, challenges, and opportunities)
前言 今天读的论文为一篇于2022年发表在"人工智能评论"(Artificial Intelligence Review)的论文,文章主要强调了NRS面临的主要挑战,并从现有技术中 ...
- Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
引言:AI技术新纪元的破局者 2025年3月6日凌晨,武汉Monica团队正式发布全球首款通用AI代理系统Manus,该工具在GitHub开源社区引发热议,单日Star数突破5万.与传统对话式AI不同 ...
- js回忆录（1） -- 变量，null 和 undefined
变量:这个东西不同的高度的人看法不一样,甚至不同领域的人的看法也不一样,当初上机组的时候依稀记得老师说这个寄存器那个锁存器什么的,然后根据高低电位就变成了二进制认识的0和1了,当然了具体细节本博主大人 ...
- (Python)用栈实现计算器的原理及实现
前言 我们日常使用的计算器是怎么实现计算的呢?能自己判断运算符的优先级去计算,能处理括号的匹配,这些都是怎么实现的呢? 一个大家熟知的答案是用栈,好的,那么为什么要用栈?为什么栈能实现呢? 目录 前言 ...
- Thinkphp3.2 PHPMailer 发送邮件
第一步 :下载附件PHPMailer解压到ThinkPHP\Library\Vendor 第二步:在Common文件夹中的公共函数function.php中写一个发送邮件的函数, 这样可以在项目任意位 ...
- Linux指令详解之：进程与系统负载
目录 5.4 进程(process) 5.4.1 守护进程 5.4.2 僵尸进程 5.4.3 孤儿进程 6.0 进程监控指令 6.0.1 ps(报告当前系统的进程状态) 6.0.2 ps aux 结果 ...
- IDEA激活后提示We could not validate your license xxxx解决办法
示例报错样式:每次激活单开都会不断弹出--很烦 解决思路是拦截jetbrains校验license的请求, 也就是找到校验license的接口屏蔽掉就行; > 别信网上的配置代理拦截 这样做 ...