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 ...
随机推荐
- 【bzoj5210】最大连通子块和 动态dp
动态$dp$好题 考虑用树链剖分将整棵树剖成若干条链. 设x的重儿子为$son[x]$,设$x$所在链链头为$top[x]$ 对于重链上的每个节点(不妨设该节点编号为$x$)令$f[x]$表示以$x$ ...
- Oracle 数据库维护管理之--dbms_lock
1.查询相关的v$视图,但是提示表或视图不存在解决办法 原因是使用的用户没有相关的查询权限导致 解决办法: grant select any dictionary to 用户; --这 ...
- Amazon S3 功能介绍
一 .Amazon S3介绍 Amazon Simple Storage Service (Amazon S3) 是一种对象存储,它具有简单的 Web 服务接口,可用于在 Web 上的任何位置存储和检 ...
- scalac:cannot connnect to compile server(idea 编译scala)
idea编译scala报错 解决办法: File->setting->scala compile server (找到jdk填上 ok)
- PHP 修改目录下所有与文件夹重名的前缀文件为index.后缀
<?phpset_time_limit(0); function traverse($path = '.' , $dir_name='') { $current_dir = opendir($p ...
- mongodb-地理坐标存储查询
mongodb可支持空间地理搜索: 查询器 $geoWithin Selects geometries within a bounding GeoJSON geometry. The 2dsphere ...
- redis-手写redis切片和非切片连接池并注入springboot中
spring-data整合了redispool, 并提供redisTemplate使用, 但有时需要用到shradedJedisPool, 就需要手动注入了 手写redispool并注入springb ...
- java 之 异常处理小结
1 :分类 检查异常(checked,受检) 运行异常(unchecked) 2:捕获异常 try/catch try/catch/finally try/finally try{ //受保 ...
- Druid连接池（三）
十二.Druid缓存 连接Oracle数据库,打开PSCache,在其他的数据库连接池都会存在内存占用过多的问题,Druid是唯一解决这个问题的连接池. Oracle数据库下PreparedState ...
- js / jquery 获取和设置 FCK Editor 的值
开发中遇到 通过 $("#content").val(); 或者 document.getElementById("content"); 并不能获取到 id 为 ...