<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. 如何查看linux服务器的版本和配置信息

    linux下看配置,可没有windows那么直观.你只能一个一个查看. 一:cpu[root@srv /]# more /proc/cpuinfo | grep "modelname&quo ...

  2. 【8】JMicro微服务-JMicro ZKUI

    ZKUI是一个开源项目,是一个查看,修改ZK数据非常方便的工具.JMicro基于ZK做服务治理,配置管理,因此使用ZKUI会提供非常大的方便. Github地址:https://github.com/ ...

  3. 使用python+selenium对web进行自动化测试

    想用python代码,对web网页进行自动化测试 web自动化测试和手动测试的区别: 手动测试:通过手动去对网页的功能进行点点点 web自动化:可以通过代码,自动对网页点点点 首先,将python+s ...

  4. 3. C++ POD类型

    POD全称Plain Old Data,通常用于说明1个类型的属性.通俗的讲,一个类或结构体通过二进制拷贝后还能保持其数据不变,那么它就是一个POD类型. C++11将POD划分为2个基本概念的合集, ...

  5. Linq基础知识小记三

    1.子查询 Linq中的子查询思想和Sql中的子查询其实差不多, 对于方法语法,一个子查询包含在另一个子查询的Lambda表达式中,代码如下: string[] names = { "Jam ...

  6. 【数组】4Sum

    题目: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...

  7. linux安装unzip及使用

    安装完linux ,发现没有UNZIP,没办法,重新安装. 1.获取unzip源码 sudo wget http://downloads.sourceforge.net/infozip/unzip55 ...

  8. WordPress导航菜单函数

    导航菜单是每一个WordPress主题必须的元素,如果你要制作一个WordPress主题,那就必须熟悉WordPress导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数 ...

  9. jenkins 踩坑路 之 jenkins ssh 脚本

    背景: 由于公司业务调整,整个业务要从阿里云迁移到aws,自然 jenkins 也是要进行迁移的.jenkins 迁移过程中遇到的问题在此记录下,希望能给遇到类似问题的朋友些许帮助.也便于我后期遇到此 ...

  10. Innosetup的状态页面和向导页面解释

    1.安装: CurStepChanged所对应的全部状态:3种 1.1. CurStep=ssInstall         --是在程序实际安装前(所有配置都准备好了)     1.2. CurSt ...