对前端页面的边框设置

二·如何对边框设置：

１.<div style="text-align:center; vertical-align:middel;"><input type="text"></div>
这样你试试,应该就是左右上下都居中了

２.如果是让内容显示的居中：
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body >
<div id="center"><p>test content</p></div>
</body>
</html>

input type="text",value文字设置居中但是明显有点偏右。。。怎么解决
{width: 30px; height: 15px; border: 1px solid #B1CEEC; text-align: center; padding: 0; }

让表单input等文本框为只读不可编辑的方法：
方法1: οnfοcus=this.blur() 当鼠标放不上就离开焦点
<input type="text" name="input1" value="中国" οnfοcus=this.blur()>

方法2:readonly
<input type="text" name="input1" value="中国" readonly>
<input type="text" name="input1" value="中国" readonly="true">

方法3: disabled
<input type="text" name="input1" value="中国" disabled="true">

完整的例子:

disabled="true" 此果文字会变成灰色，不可编辑。
readOnly="true" 文字不会变色，也是不可编辑的

css屏蔽输入：<input style="ime-mode: disabled">

有两种方法
第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。
第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本，能取到里面的value值并且来用。

让文本域前面的内容在文本域的左上角显示：
<span style="float:left">车主评价：</span><textarea></textarea>

让文本域前面的内容居中显示：
可以通过套表格实现：
<table><tr><td><span style="float:left">车主评价：</span></td><td><textarea></textarea></td></tr></table>

div设置外边框相关如下：
border-color:#000设置4边边框颜色为黑色；
border-color:+颜色值，即可设置对象边框颜色；
border-left-color:#000 设置左边框颜色为黑色；
border-right-color:#000 设置右边框颜色为黑色；
border-top-color:#000 设置上边框颜色为黑色；
border-bottom-color:#000 设置下边框颜色为黑色；
条件：必须设置对象边框存在，设置边框宽度必须大于或等于1px，边框颜色才会显示并有存在意义。
.divcss5{ border-style:solid; border-width:1px; border-color:#000}
这样就设置对象边框为实线边框，参数就是solid，边框宽度（厚度）为1px，边框颜色为黑色，这样设置边框颜色才会生效。

#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(/images/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<p> border-radius 属性允许向元素添加圆角。</p>
<p>指定背景颜色元素的圆角:</p>
<p id="rcorners1">圆角</p>
<p>指定边框元素的圆角:</p>
<p id="rcorners2">圆角</p>
<p>指定背景图片元素的圆角:</p>
<p id="rcorners3">圆角</p>

如何限制HTML文本框里的内容不可更改
<input type="text" disabled="disabled" value="你想要显示的内容">
<input type="text" readonly value="你想要显示的内容">
两种方式都可以

去掉<li>标签的远点
方法一：
<ul>
<li style="list-style-type:none;">百度</li>
<li style="list-style-type:none;">雅虎</li>
<li style="list-style-type:none;">新浪</li>
<li style="list-style-type:none;">谷歌</li>
</ul>
方法二：
<style>
li {
list-style-type:none;
}
</style>
<ul>
<li>百度</li>
<li>雅虎</li>
<li>新浪</li>
<li>谷歌</li>
</ul>
方法三：
<style>
.aa {
list-style-type:none;
}
</style>
<ul>
<li class="aa">百度</li>
<li class="aa">雅虎</li>
<li class="aa">新浪</li>
<li class="aa">谷歌</li>
</ul>

对前端页面的边框设置相关推荐

从0开始html前端页面开发_CSS设置图像边框阴影
1.css阴影样式语法: box-shadow 2.语法 div{box-shadow:0 0 1px #000 inset;} 代表边框间距靠左0 靠上0 和1px阴影范围阴影颜色为黑色(#000 ...
前端页面乱码，设置了utf-8，检查了浏览器编码还是出现乱码
写项目后台管理的时候,原本正常显示的页面加了两行代码,页面突然变成了乱码,我以为是我那两行代码的问题,后来把代码删了,还是乱码,数据库查出来的所有数据都是可以正常读取出来的.但是页面上写死的中文全部出 ...
从0开始html前端页面开发_CSS设置图像透明度
1.css语法 opacity IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度.opacity 属性能够设置的值从 0.0 到 1.0 ...
从0开始html前端页面开发_CSS设置图像圆角
1.css语法: border-radius 2.语法结构 div{border-radius:5px;} 设置DIV对象盒子四个角5像素圆角效果 div{border-radius:5px 0;} ...
Web前端开发-边框设置
Web前端开发,自学笔记整理边框设置 1.边框设置技巧 <!DOCTYPE html> <html><head><meta charset="UT ...
css3帮你轻松实现圆角效果，不一样的前端页面。
在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一.今天,小编为大家介绍CSS3提供的可以将矩形变为圆角 ...
rgb颜色查询工具_Web前端页面重构之工具篇（Photoshop）
一.说在前面的话 1.1 职责:拒绝"图片仅供参考请以实物为准" 团队的协作流程一般分为以下几个阶段: 专业的设计师做设计由前端工程师切图重构还原成浏览器能渲染的页面,再开发功能 ...
android的边框设置
android的边框设置前端页面中的页面元素都会有边框, html中可以通过border设置边框, android设置元素的边框需要在背景图元素中进行设置: 实现方式一: 实现代码: 在drawab ...
实现一个博客系统(前端页面设计)
博客系统的四个页面展示效果: 注意CSS有一些隐式规定,下面代码的状态:上下边距不是50px(不是两者边距之和,而是他们的最大值);上下边距塌方问题,况且只在垂直方向有,水平方向就是他们的和:况且他的 ...
课程设计-商店管理系统（二）----前端页面的制作（二）
前端页面制作(二) 之前的博文课程设计-商店管理系统(一)----前端页面的制作(一) 看了老师发的课程设计要求,我设置准备制作以下功能商品查询: 该界面可以进行查询:商品序号.商品编码.商品名称 ...

对前端页面的边框设置

对前端页面的边框设置相关推荐

最新文章

热门文章