css points
<style type="text/css" rel="stylesheet">
.a{
width:500px;
height:400px;对放置图片的div区域设置宽和高
border:1px solid red;
}
*{
margin:0px;
padding:0px;
}
</style>
<div class="a">
<img src="oYYBAFWV2zaIKeRmAAEOr_01B-YAACktACESFgAAQ7H134.jpg" border="0px" width="500px" height="400px" />对背景图片本身的宽和高进行设置
</div>
效果如图
<style type="text/css" rel="stylesheet">
p:first-child{匹配第一个p元素
border:1px solid yellow;
}
p>i:first-child{匹配p元素中的第一个i元素
font-weight:bolder;
}
p:first-child i{匹配第一个p元素中的所有元素
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>.some <i>text</i>.</p>
<p>some <i>text</i>.some <i>text</i>.</p>
</body>
<style type="text/css" rel="stylesheet">
[title]{
color:yellow;
}
</style>
</head>
<body>
<h1>title属性选择器</h1>
<h2 title="hello">hello</h2>
<a href="http://w3cschool.com" title="w3cschool">w3cschool</a>
</body>
<style type="text/css" rel="stylesheet">
[title]{
color:pink;
}
[title=w3cschool]{
border:2px solid red;
}
</style>
</head>
<body>
<h1>title属性选择器</h1>
<h2 title="hello">hello</h2>
<a href="http://w3school.com" title="w3cschool">w3cschool</a>
</body>
<style type="text/css" rel="stylesheet">
[title~=hello]{title属性中包含hello
color:pink;
}
</style>
<h1>title属性选择器</h1>
<h2 title="this world hello">hello</h2>
<a href="http://w3school.com" title="w3cschool">w3cschool</a>
<style type="text/css" rel="stylesheet">
input[type="text"]
{ width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
padding:0px;
}
input[type="button"]{
width:110px;注意按钮实际宽度
margin-left:20px;
display:block;
font-family: Verdana, Arial;
}
</style>
<body>
<form name="input" action="" method="get">
<input type="text" value="name" size="20">
<input type="text" value="password" size="20">
<input type="button" value="提交">
input元素默认有2px的边框和1px的内补白
此图为按钮的结构图 会发现虽然设置了宽度为110px 但是实际结构中宽度只有94px，需要加上左右边框和内边距才合计为设定的宽度值
<body>
<form action="" method="post" class="STYLE-NAME">
<h1>Contact Form</h1>
<span id="header">Please fill all the texts in the fields</span>
<hr size=2px width=100% style="margin:0px auto;color:#CCC">size表示分隔线的厚度
<span>Your name:<input type="text" id="name" name="name" placeholder="Your Full Name" /></span>
<span>Your Email:<input type="email" id="email" name="email" placeholder="Vaild Email Adress" /></span>
<span>Message:<textarea id=="message" name="message" cols="20" rows="5" placeholder="Your Message To Us"></textarea></span>
<span>Subject:
<select name="selection">
<option value="Job Inquiry">Job Inquiry</option>
<option value="General Question">General Question</option>
</select>
</span>
<span> <input type="button" class="button" value="send" /></span>
</form>
</body>
css
@charset "utf-8";
*{
margin:0px;
padding:0px;
}
form{
width:500px;
height:350px;
background-image:url(1.jpg);
background-repeat:no-repeat;;
background-position:top left;
background-attachment:fixed;需要改变背景图片的大小
padding:0px;
margin:10px auto;
}
h1{
margin-top:5px;
margin-left:20px;
}
#header{
display:block;
font-size:12px;
margin:1px auto 20px 20px;
font-weight:bold;
}
span{
display:block;
margin:15px;
margin-left:100px;
font-weight:bold;
}
input{
width:200px;
}
input[type="button"]{
width:70px;
height:40px;
margin:5px auto;
}
效果图
css points的更多相关文章
- [原][osgearth]earth文件加载道路一初步看见模型道路
时间是2017年2月5日17:16:32 由于OE2.9还没有发布,但是我又急于使用OE的道路. 所以,我先编译了正在github上调试中的OE2.9 github网址是:https://github ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 关于 CSS 反射倒影的研究思考
原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- word-break|overflow-wrap|word-wrap——CSS英文断句浅析
---恢复内容开始--- word-break|overflow-wrap|word-wrap--CSS英文断句浅析 一 问题引入 今天在再次学习 overflow 属性的时候,查看效果时,看到如下结 ...
- html+css笔记
文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式): <!DOCTYpE HTML> HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...
- CSS、j's单行、多行文本溢出显示省略号
在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style=& ...
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- CSS的一些小技巧
1.黑白图像img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: graysc ...
随机推荐
- C#里面BLL、Model、DAL、UI层
C# 三层架构分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL)再加上实体类库(Model) 1.实体类库(Model),主要存放数据库中的表字段. 操作: (1)先建立实体类库Mode ...
- 汽车检测SIFT+BOW+SVM
项目来源于 <opencv 3计算机视觉 python语言实现> 整个执行过程如下: 1)获取一个训练数据集. 2)创建BOW训练器并获得视觉词汇. 3)采用词汇训练SVM. 4)尝试对测 ...
- 【xsy1131】tortue FFT
题目大意: 一次游戏要按N个按键.每个按键阿米巴有P[i]的概率按错.对于一串x个连续按对的按键,阿米巴可以得分 $f(x)=tan(\dfrac{x}{N})\times e^{arcsin(0.8 ...
- android开发中的 Activity 与 Context 区别与联系
Context 是 Application /Activity /Service的基类 Intent(Context , Class); Activity中的上下文Context是随着活动的产生而产生 ...
- 学生信息管理系统-顺序表&&链表（数据结构第一次作业）
实验目的 : 1 .掌握线性表的定义: 2 .掌握线性表的基本操作,如建立.查找.插入和删除等. 实验内容: 定义一个包含学生信息(学号,姓名,成绩)的的 顺序表和链表,使其具有如下功能: (1) 根 ...
- Spring Security构建Rest服务-1201-Spring Security OAuth开发APP认证框架之实现服务提供商
实现服务提供商,就是要实现认证服务器.资源服务器. 现在做的都是app的东西,所以在app项目写代码 认证服务器: 新建 ImoocAuthenticationServerConfig 类,@Ena ...
- 转--log4j.properties 详解与配置步骤
一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR 为严重错误 主要是程序的错误WARN 为一般警告,比如session丢失IN ...
- 玩转mongodb（二）：mongodb基础知识
常用基本数据类型: null null用于表示空值或者不存在的字段: {"data":null} 布尔型 布尔类型只有两个值,true和false: {"data&quo ...
- KafkaOffsetMonitor监控kafka
KafkaOffsetMonitor监控kafka 1. KafkaOffsetMonitor是一个可以用于监控Kafka的Topic及Consumer消费状况的工具,其配置和使用特别的方便.源项目G ...
- win7下如何解决对方可以ping通我，但我ping不通对方问题
以下是在百度经验里面找到的文章:http://jingyan.baidu.com/article/6b97984da3ac851ca2b0bfe1.html 当我在虚拟机的linux系统中ping本机 ...