对前端页面的边框设置

最新推荐文章于 2024-08-12 09:00:00 发布

等风来盼风暖

最新推荐文章于 2024-08-12 09:00:00 发布

阅读量6.6k

点赞数

分类专栏：前端的技术

本文链接：https://blog.csdn.net/qq_41905448/article/details/81662584

版权

前端的技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

二·如何对边框设置：

１.<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>