<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. JAVA并发编程学习笔记------多线程调优

    1. 多线程场景下尽量使用并发容器代替同步容器 (如ConcurrentHashMap代替同步且基于散列的Map, 遍历操作为主要操作的情况下用CopyOnWriteArrayList代替同步的Lis ...

  2. 【bzoj2789】 Letters 树状数组

    又是一道树状数组求逆序对的题目. 这一题我们可以将第二个串中的每一个字母,与第一个串中的字母做两两匹配,令第二个串第i个字母的值id[i]为该字母与第一个串中的字母匹配到的位置. 然后考虑到所求答案为 ...

  3. 【BZOJ1502】【NOI2005】月下柠檬树 simpson 积分

    特别提醒:eps至少要5e-6 首先我们来研究下平行光对投影的影响. 一个二维的图形,若它与光屏平行,那么不论平行光与光屏的夹角为多少,所得图形与原图形全等的(只是位置会有影响) 通过这么一分析,我们 ...

  4. QuantLib 金融计算——修复 BatesProcess 中的两个 Bug

    QuantLib 金融计算--修复 BatesProcess 中的两个 Bug 我发现了 BatesProcess 中的两个 Bug: 基类 HestonProcess::factors 的返回值取决 ...

  5. spring中的context:include-filter和context:exclude-filter的区别

    在Spring 的配置文件中有: <context:component-scan base-package="njupt.dao,njupt.service"> < ...

  6. centos7.2 get pid by process name with python3.6

    centos7.2 get pid by process name with python3.6 #-*- encoding:UTF-8 -*- import os import sys import ...

  7. nginx+jwplayer配置flv/MP4点播系统, 视频拖动支持

    一 配置nginx 1. 下载 nginx 最新版 http://nginx.org/ 2. 安装依赖库, 以ubuntu为例 apt-get install libpcre3 libpcre3-de ...

  8. Php开发银行接口之浦发银行

    Php开发银行接口之浦发银行 (提示:下面的经验都是按照开发文档一步一步踩坑过来的,但是不能不看开发文档!!!) 第一步:开发准备 1,安装java,百度下载JDK很方便(我自己网盘有,然后配置环境变 ...

  9. node服务端搭建学习笔记

    咳咳,终于迈出这一步了...这篇文章将是边学边写的真正笔记...用于mark下学习过程中的点滴~ 开篇先把我学习参考的文章来源给出,以表示对前人的尊敬: https://github.com/nswb ...

  10. facebook 摘要生成阅读笔记（二） Abstractive Sentence Summarization with Attentive Recurrent Neural Networks

    整体流程与第一篇差不多,只是在encoder和decoder加入了RNN Encoder: 1. ai=xi+li ai=词向量+词在序列中的位置信息(相当于一个权重,[M, 1]) 流程: 先是CN ...