施主同西否
施主同西否 (学号:149)
等级:LV3 经验值:1290

爱编程,更爱w3cschool!

TA的能力评估:39分

TA的书签

暂时没有书签

TA的提问

TA还没有提过问题哟

TA的回答

3
赞同

1、CSS边框虚线


这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css height)和css 宽度css width)为350像素是为了便于观看演示 其它意思。

一、四边为虚线边框

border:1px dashed #000; 黑色虚线边框

实例:

CSS代码: .divcss5{border:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5">我的四边为黑色虚线边框</div>

这里设置边框缩写方式定义divcss5选择器四边边框为1px的黑色虚线边框

二、左边为虚线:

CSS代码: .divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5-1">我的左边为黑色虚线边框</div>

这里设置了左边一边为黑色虚线边框

三、右边为虚线:

CSS代码: .divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5-2">我的右边为黑色虚线边框</div>

这里设置了右边一边为黑色虚线边框

四、顶部边(上边)为虚线:

CSS代码: .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5-3">我的上边为黑色虚线边框</div>

这里设置了顶边(上边线)一边为黑色虚线边框

五、底部边(下边)为虚线:

CSS代码: .divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5-4">我的下边为黑色虚线边框</div>

这里设置了底边(下边线)一边为黑色虚线边框

六、任意一边不为虚线,其它三边为虚线情况

加入右边边框不为虚线而没有边线,其它三边为黑色虚线边框

CSS代码: .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}
Html代码: <div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>

这里通过先设置了该对象四边为黑色1px虚线边框,紧接着又设置一边边线为0的设置,这样相当于设置了3边的边框虚线属性,但是这里注意边框属性设置前后顺序。

以上实例完整 DIV+CSS 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 DIVCSS5实例说明<title>www.w3cschool.cn</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
/* www.w3cschool.cn实例 */
</style>
</head>
<body>
www.w3cschool.cn css虚线实例实例<br>
<div class="divcss5">我四边为虚线边框</div><br>
<div class="divcss5-1">我的左边为黑色虚线边框</div><br>
<div class="divcss5-2">我的右边为黑色虚线边框</div><br>
<div class="divcss5-3">我的上边为黑色虚线边框</div><br>
<div class="divcss5-4">我的下边为黑色虚线边框</div><br>
<div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>

以上演示各种颜色的虚线边框,如想更加详细了解 CSS border ( CSS 边框 )可进入http://www.w3cschool.cn/css/css-border.html

2、超链接虚线下划线


我们常常会设置被链接的文字内容要么带链接有虚线的下划线,或鼠标移动到有链接的文字上出现虚线下划线,这个怎么实现的呢,这里为大家介绍关于CSS超链接的虚线下划线。

一、带链接文字有虚线下划线

这里也是通过CSS border边框属性来控制超链接a对象的CSS样式。

演示CSS代码:

a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/
a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

完整DIV CSS代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线下划线 W3Cschool实例说明</title>
<style>
a{ border-bottom:1px dashed #111;text-decoration:none;}
a:hover{ border:0;}
</style>
</head>
<body>
欢迎到<a href="http://www.w3cschool.cn">W3C学院</a>的www.w3cschool.cn - W3Cschool在线教程学习CSS
</body>
</html>

说明:text-decoration:none;这个是去掉CSS 下划线( 超链接 默认自带的下划线属性)

以上为有 CSS超链接文字 带虚线下划线。

二、鼠标放到带链接文字上时出现虚线下划线

这个和上面的很相似,只需对 超链接 A 去掉下划线,对鼠标经过时 CSS文字 下方带虚线边框下划线即可。 对应 CSS 代码:

a{text-decoration:none;}
a:hover{border-bottom:1px dashed #111;}

这样就实现,大家不妨试试超链接下划线实例

3、列表型CSS虚线下划线


常常他们碰到CSS LI的时候希望此CSS 列表样式每排内容下方为虚线分割开如下图

这里我们只需对LI设置底部边框为虚线边框即可。 首先我们是在对CSS初始化情况下设置CSS代码: li{border-bottom:1px dashed #111;} 即可实现li的列表型内容如上图虚线隔开效果(每个li内容底部为虚线边框) 还有我们常常碰见li的底部虚线很小就如一个点那么小,而border就很难实现了,这个时候我们需要一张虚线的点图片即可(一边高1像素宽3像素的1像素颜色图片即可实现) 对应CSS li代码: Li{background:url(点图片路径) repeat-x 0 bottom} 这里不再详细演示我们在VIP也为大家详细介绍和演示制作各种li的CSS知识点。

4、CSS定义一条水平虚线


这个很好理解同样可以使用对div对象设置边框虚线即可实现同时也可以对hr水平线标签设置虚线属性即可实现水平虚线分割线。

这里带过即可如下:

对div设置水平虚线线:

.divcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}

对应HTML代码:

<div class="divcss5"></div>

对hr水平分割线设置属性: 第一种,hr标签内设置虚线属性:


<hr size=1 style="color: blue;border-style:dashed ;width:100%">

这里说明的是size为hr的值,一边设置为1即可。

第二种在css代码或CSS文件中定义hr的css属性

hr {border-top:1px dashed #00F ; }

对应html内hr标题代码:

<hr size=1>

这里是对hr设置边框为顶部或底部上下边任意一条边为1像素的蓝色虚线边框,同时设置hr的size为1,和第一种值大致相同,唯一区别在于当在html中出现了hr标签,hr标签属性就为css设置,如果网页多次出现可以减少代码量。以上所有的CSS虚线涉及了css borer、CSS 下划线CSS 背景等知识,希望大家能掌握各种方法设置DIV虚线、虚线边框、DIV CSS虚线下划线的方法。

查看详情
2016-11-14 05:41:57 回复(0)
3
赞同

一、CSS字间距、字与字之间间隔距离


使用CSS单词: letter-spacing

对应教程:http://www.w3cschool.cn/cssref/pr-text-letter-spacing.html

二、HTML空格代码输入


使用HTML代码字符:“  

更多符号实体:http://www.w3cschool.cn/htmltags/ref-entities.html

三、CSS段首空格效果


使用CSS单词: text-indent

对应教程:http://www.w3cschool.cn/cssref/pr-text-text-indent.html段落空格效果真正名字叫,CSS缩进又叫CSS段首文字缩进,缩进的字符多少可以通过CSS设置,可设置2个中文字宽度空格效果,可宽可窄。

四、相似问题


查看详情
2016-11-18 17:27:30 回复(0)
3
赞同

如何实现无图片的圆角输入框这问题没什么好烦恼的,其实利用css3新添加的radius属性 就可以轻松的解决这个问题。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3Cschool圆角输入框</title>
<style>
input {
    background:#fff; border: 1px solid #000;
    padding:5px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
</style>
</head>
<body>
<input
class="inout"
name="inout"
type="text"
value="W3Cschool圆角矩形输入框">
</body>
</html>

PS:

-moz(例如上面代码中的: -moz-border-radius:5px; 是firefoe的专有属性; )用于Firefox
-webkit(例如上面代码中的:-webkit-border-radius:5px;  是chrome和safari的专有属性;)用于Safari和Chrome。
当然,万恶的IE6是不支持这个属性的。
查看详情
2016-11-28 19:48:31 回复(0)
4
赞同

html文字居中和html图片居中方法代码,通过在html中实现文字居中图片居中篇在html中实现文字图片内容居中有三种方法,其中两种使用CSS样式实现,一直使用原始的html标签内加入“align="center"”(居中)实现。

一、对body加CSS居中样式


我们直接对body 设置CSS样式:text-align:center1、完整HTML实例代码:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="gb2312" /> 
<title>W3Cschool居中实例</title> 
<style> 
body{text-align:center} 
</style> 
</head> 
<body> 
W3Cschool会被居中 
</body> 
</html>

2、居中实例截图

对body设置居中实现文字或图片居中

对body设置居中实现文字或图片居中截图

二、对文字外层对象加css居中样式


首先我们CSS命名选择器 为“.w3cschool”,对此选择器内加居中样式。我们实例演示2个DIV对象,一个放文字一个放图片。1、对应CSS代码如下:

.w3cschool{text-align:center}

2、完整HTML+DIV+CSS代码如下:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="gb2312" /> 
<title>W3Cschool居中实例</title> 
<style> 
.w3cschool{text-align:center} 
</style> 
</head> 
<body> 
<div class="w3cschool">W3Cschool会被居中</div> 
<div class="w3cschool"><img src="http://statics.w3cschool.cn/images/w3c/logo.png" /></div> 
</body> 
</html>

3、CSS实现对象内图片和文字居中效果截图

实现html文字居中-html图片居中实例

实现html文字居中-html图片居中实例截图

三、之间对文字外层对象加align="center"


此方法是以前较为常见的方法,直接在html标签内使用align="center"即可实现对象内图片或文字内容实现居中。我们实例演示HTML表格里居中与一般HTML标签内内容居中。

1、完整HTML源代码:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="gb2312" /> 
<title>html align居中-W3Cschool</title> 
</head> 
<body> 
<div align="center">W3Cschool会居中的</div> 
<table width="100%"> 
<tr> 
<td align="center">表格中居中</td> 
</tr> 
</table> 
</body> 
</html>

2、实例效果截图

html文字居中实现截图

html文字居中,html table 表格内文字居中实现截图

直接在标签内使用align属性,方便实践普通html标签html表格标签 内使用“align="center"”居中代码实现对象内内容居中。

查看详情
2016-11-29 11:44:22 回复(0)
4
赞同

以下是W3Cschool官网 整理的点击弹出可拖动的DIV层代码:可拖动DIV 层(背景变暗)演示结果图:

可拖动DIV层(背景变暗)

具体代码如下(复制即可使用):

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>W3Cschool可拖动DIV提示窗口</title> 
<script language="javascript"> 
function alertWin(title, msg, w, h){ 
var titleheight = "22px"; // 提示窗口标题高度 
var bordercolor = "#666699"; // 提示窗口的边框颜色 
var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色 
var titlebgcolor = "#666699"; // 提示窗口的标题背景色 
var bgcolor = "#FFFFFF"; // 提示内容的背景色 

var iWidth = document.documentElement.clientWidth; 
var iHeight = document.documentElement.clientHeight; 
var bgObj = document.createElement("div"); 
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; 
document.body.appendChild(bgObj); 

var msgObj=document.createElement("div"); 
msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;"; 
document.body.appendChild(msgObj); 

var table = document.createElement("table"); //www.w3cschool.cn w3cschool
msgObj.appendChild(table); 
table.style.cssText = "margin:0px;border:0px;padding:0px;"; 
table.cellSpacing = 0; 
var tr = table.insertRow(-1); 
var titleBar = tr.insertCell(-1); 
titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor; 
titleBar.style.paddingLeft = "10px"; 
titleBar.innerHTML = title; 
var moveX = 0; 
var moveY = 0; 
var moveTop = 0; 
var moveLeft = 0; 
var moveable = false; 
var docMouseMoveEvent = document.onmousemove; //www.w3cschool.cn w3cschool
var docMouseUpEvent = document.onmouseup; 
titleBar.onmousedown = function() { 
var evt = getEvent(); 
moveable = true; 
moveX = evt.clientX; 
moveY = evt.clientY; 
moveTop = parseInt(msgObj.style.top); 
moveLeft = parseInt(msgObj.style.left); 

document.onmousemove = function() { 
if (moveable) { 
var evt = getEvent(); 
var x = moveLeft + evt.clientX - moveX; //www.w3cschool.cn w3cschool
var y = moveTop + evt.clientY - moveY; 
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) { 
msgObj.style.left = x + "px"; 
msgObj.style.top = y + "px"; 
} 
} 
}; 
document.onmouseup = function () { 
if (moveable) { 
document.onmousemove = docMouseMoveEvent; //www.w3cschool.cn w3cschool
document.onmouseup = docMouseUpEvent; 
moveable = false; 
moveX = 0; 
moveY = 0; 
moveTop = 0; 
moveLeft = 0; 
} 
}; 
} 

var closeBtn = tr.insertCell(-1); 
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor; 
closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>"; 
closeBtn.onclick = function(){ 
document.body.removeChild(bgObj); 
document.body.removeChild(msgObj); 
} 
var msgBox = table.insertRow(-1).insertCell(-1); 
msgBox.style.cssText = "font:10pt '宋体';"; 
msgBox.colSpan = 2; 
msgBox.innerHTML = msg; 

// 获得事件Event对象,用于兼容IE和FireFox 
function getEvent() { 
return window.event || arguments.callee.caller.arguments[0]; 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="w3cschool" onclick="alertWin('演示','我是<a href=\\'http://www.w3cschool.cn/cssref\\'>CSS参考手册</a>内容300是宽度200是高度',300,200);" /> 
</body> 
</html>
查看详情
2016-11-30 15:03:46 回复(0)
二维码
建议反馈
二维码