<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>&nbsp;<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的更多相关文章

  1. [原][osgearth]earth文件加载道路一初步看见模型道路

    时间是2017年2月5日17:16:32 由于OE2.9还没有发布,但是我又急于使用OE的道路. 所以,我先编译了正在github上调试中的OE2.9 github网址是:https://github ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  4. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  5. word-break|overflow-wrap|word-wrap——CSS英文断句浅析

    ---恢复内容开始--- word-break|overflow-wrap|word-wrap--CSS英文断句浅析 一 问题引入 今天在再次学习 overflow 属性的时候,查看效果时,看到如下结 ...

  6. html+css笔记

    文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式):    <!DOCTYpE HTML>   HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...

  7. CSS、j's单行、多行文本溢出显示省略号

    在项目中,由于实际描述文字过多,导致初始页面纵向长度过长,也使得余下信息利用率降低:所以在文字过多的时候,初始化限制行数是有必要的 1. CSS单行文本溢出,显示省略号 <div style=& ...

  8. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  9. CSS的一些小技巧

    1.黑白图像img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: graysc ...

随机推荐

  1. Mybatis常用知识点总结

    1. #{}和${}的区别是什么? ${}是Properties文件中的变量占位符,它可以用于标签属性值和sql内部,属于静态文本替换,比如${driver}会被静态替换为com.mysql.jdbc ...

  2. docker下 klee第一个测试

    被测试的简单函数源文件位于  /klee_src/examples/get_sign 目录下 该源代码分为三个部分 第一个部分为被测试的函数 int get_sign(int x) { if (x = ...

  3. js之作用域

    1.什么是作用域 作用域是用于收集存储维护变量,以及当前执行代码声明的变量所拥有的权限, 例如 : function foo(a){ console.log(a); --------    1    ...

  4. Python中通过函数对象创建全局变量

    先看下面这段代码,显然无法work. 因为代码试图在TestVariableScope()中引用一个没有被定义的变量a.所以必须报错,如下图-1. 不过如果你将第2行代码注释掉.代码就能跑通了,如图- ...

  5. (转)python学习笔记4--数字类型与操作符

    原文:https://blog.csdn.net/lemonwyc/article/details/37558269 1. 同时赋值(Simultaneous Assignments) python支 ...

  6. jdbc调试sql语句方法

    在main命令行输入三个参数到oracle 的 dept2表(自己建的 和dept一样(deptno,dname,loc)),插入到数据库中去.通过本例子,学习在java里调试sql的方法. 写完sq ...

  7. Android Library项目发布到JCenter最简单的配置方法

    前沿 网上的步骤看起来实在太麻烦,gituhb上偶然间看到的一个项目,经过实际验证确实可行.github连接:https://github.com/xiaopansky/android-library ...

  8. Javac语法糖之内部类

    在Javac中解语法糖主要是Lower类来完成,调用这个类的入口函数translateTopLevelClass即可.这个方法只是JavacCompiler类的desugar方法中进行了调用. 首先来 ...

  9. Eclipse及IDEA插件开发

    https://github.com/eclipse/eclipse.jdt.ui http://www.eclipse.org/jdt/ui/ https://www.cnblogs.com/xin ...

  10. Linux时间命令

    Linux一般有系统时间和硬件时间之分,date命令是显示和操作系统时间:hwclock用来操作硬件时间(日期).日期和时间很重要,比如错误的日期和时间会导致你不能编译程序. 1 date 用法:   ...