我的博客

最新推荐文章于 2024-05-01 00:06:10 发布

wylasr06

最新推荐文章于 2024-05-01 00:06:10 发布

阅读量293

点赞数 1

分类专栏：博客文章标签： html

本文链接：https://blog.csdn.net/lht1510720220/article/details/70050106

版权

博客专栏收录该内容

1 篇文章 0 订阅

订阅专栏

/*下面是一个使用js实现的一个span在鼠标悬停时出现的提示框，并且提示框中的文字有不同的颜色*/

<!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>用js实现同一个span的innerHTML的多种颜色</title>

/*虽然用hover这个选择器失败了，但还是感谢*/
<script>
function show(){
var msg=document.getElementById("b");
msg.innerHTML="这里有个一提示信息，这里有个一提示信息，这里有个一提示信息";
var mystyle=msg.style;
mystyle.color="green";
mystyle.top="110px";
mystyle.left="1270px";
mystyle.width="260px";
mystyle.height="80px";
mystyle.position="absolute";
mystyle.display="block";
mystyle.borderStyle="solid";
mystyle.borderWidth="1px";
mystyle.borderColor="#A3A3FF";
/*总算搞上去了，还是要用js才行,
这里使用了String对象的fontcolor()方法
值得注意的是这个方法并不是将颜色设置到当前对象，
而是返回一个新的对象。
令人意外的是这里面的字符串(暂且把innerHTML理解为一个String)
也可以用java里面的"+"操作符来拼接，厉害的是这里的字符串对象
还携带了自己的fontcolor
*/
var str = "xixi";
var s = str.fontcolor("blue");
msg.innerHTML =msg.textContent+"<br/>"+s;
/*这里也很不错，使用下面的三个属性指定具体位置的圆角程度*/
mystyle.borderTopLeftRadius="10px";
mystyle.borderTopRightRadius="10px";
mystyle.borderBottomRightRadius="10px";

}
/*用这个函数隐藏我们的提示信息以及提示框*/
function hide(){
document.getElementById("b").innerHTML="";
document.getElementById("b").style.borderStyle="none";
}
</script>
</head>
<body>
<div>

<a href="" οnmοuseοver="show()" οnmοuseleave="hide()"><span id="b"></span>hh</a>
</div>
</body>

</html>

/*上面是一个使用js实现的一个span在鼠标悬停时出现的提示框，并且提示框中的文字有不同的颜色*/

/*下面是一个简单的博客主页*/

<html>
<head>

<link rel="stylesheet" href="liuhantao.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1 id="header-name">柳漢涛的网络日志</h1>
</div>
<div id="content">
<div id="alpha">
<div id="news" class="latestArticle">
<div class="header">
<h1 class="articleTitle"><a href="http://www.baidu.com" >CSS in JS 简介</a></h1>
<p id="articleTags">分类:<a href="http://www.baidu.com">开发者手册</a></p>
</div>
<div class="content">
<p id="introduce">
以前,网页开发有一个原则叫做"
<a class="differ" href="https://en.wikipedia.org/wiki/Separation_of_concerns#HTML.2C_CSS.2C_JavaScript" >
关注分离点</a>"(separa of concerns).
</p>
<p id="readMore">
<a href="http://www.baidu.com">继续阅读全文>></a>
</p>
<span>posted by
<a href="http://www.baidu.com">柳漢涛</a> on
<abbr>2017年 04月 05日 00:15</abbr>
</span>
<span id="separator">|</span>
<a href="http://www.baidu.com">留言(16)</a>
</div>
<div id="homePage">
<h3 id="homePageTitle">
最新文章
</h3>
<ul >
<li class="module_list_item"><a href="http://www.baidu.com">2017年03月28日 » 技术的边界</a></li>
<li class="module_list_item"><a href="http://www.baidu.com">2017年03月18日 » Reduce 和 Transduce 的含义</a></li>
<li class="module_list_item"><a href="http://www.baidu.com">2017年03月13日 » Pointfree 编程风格指南</a></li>
<li class="module_list_item"><a href="http://www.baidu.com">2017年03月 9日 » Ramda 函数库参考教程</a></li>
<li class="module_list_item"><a href="http://www.baidu.com">2017年03月 3日 » 技术的热门度曲线</a></li>
<li class="module_list_item"><a href="http://www.baidu.com">2017年03月 1日 » 高级人类的崛起</a></li>
<li class="module_list_item"><a href="http://www.baidu.com">更多文章>></a></li>
</ul>
</div>
</div>
</div>
<div id="beta" class="module">
<div id="comments">
<h2>最新留言</h2>
<div id="ly">
<ul>
<li><a href="http://www.baidu.com" ><span id="leftBlock">hello</span><span id="rightBlock">      这里有一个鼠标悬停的效果,可以看到就好了</span>comment1</a></li>
<li><a href="http://www.baidu.com">comment2</a></li>
<li><a href="http://www.baidu.com">comment3</a></li>
<li><a href="http://www.baidu.com">comment4</a></li>
<li><a href="http://www.baidu.com">comment5</a></li>
<li><a href="http://www.baidu.com">comment6</a></li>
</ul>
</div>
</div>
<div id="aboutMe">
<h2> 关于</h2>
<ul>
<p><a href="http://www.baidu.com"><image id ="img" src="E:\matrix1.jpg"></image></a></p>
<li><a href="http://www.baidu.com">个人简介</a></li>
<li>文章 <a href="http://www.baidu.com">1673</a>留言42654</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="footer_msg" align="right">
<p>
<a href="http://www.baidu.com">
联系方式 | liuhantao.com 2003 - 2017 Site Meter
</a>
</p>
</div>
</div>
</div>
</body>
</thml>

/*上面是一个简单的博客主页*/

/*下面是博客的css样式*/

body{
background-color:#f5f5d5;/*body背景色*/
line-height: 1.8em;/*body行间距*/
color:#111111;/*字体颜色*/
font-family: Georgia, serif;
}
a{
text-decoration:none;
}
#alpha #news .content #introduce a{
text-decoration:underline;
color:#111111;
}
#alpha #news .content #introduce a:hover{
color:blue;
}

a:visited{
color:gray;
}
a:hover{
color:blue;
}

div{
display:block;
}
div#beta{
width: 26%;
margin-top: 0.9em;/*上边距*/
float:right;/*将id为beta的div显示在主体的右边*/
margin-right: 3%;
}
/*为类选择器module设置样式*/
.module #comments{
background-color: #DEEBF7;
/*这两个属性是干嘛的？？？*/
padding: 1em;
border-radius: 2em;
}
.module #aboutMe{
margin-top:0.9em;
background-color: #DEEBF7;
/*这两个属性是干嘛的？？？*/
padding: 1em;
border-radius: 2em;
margin-bottom:1em;
}
div#alpha{
margin-left: 3%;
width: 64%;
margin-top: 0.9em;/*上边距(相对于上面一个组件)*/
float:left;/*将id为beta的div显示在主体的左边*/
}
div#header{
margin-top: 0.9em;/*上边距*/
font-family: Georgia, serif;/*字体*/
font-size: 0.6em;/*字符大小*/
border-bottom: 1px solid #d3d3d3;/*添加不同组件之间的分割线*/
}
div#alpha #news .header h1{/*多级不同选择器嵌套的样式设置*/
border-bottom: 1px solid #d3d3d3;
}
#articleTags{
float:right;
}
#readMore{
border-bottom:1px solid #d3d3d3;
}

#homePageTitle{
border-bottom:1px solid #d3d3d3;
}

div#homePage ul li a{
color: rgba(0,0,0,0.5);;
}
div#homePage ul li a:hover{
color: blue;
}
#img{
width:52px;
height:64px;
}
ul li a span{
display:none;/*默认不现实这个标签*/
}

ul li a:hover span{
position:absolute;/*绝对位置*/
display:block;
top:110px;
left:1270px;
width:200px;
height:60px;
border-width:1px;
border-style:solid;
color:#000000;
border-color:#A3A3FF;
border-top-left-radius:10px;/*设置圆角*/
border-top-right-radius:10px;
border-bottom-right-radius:10px;
z-index:1;/*设置z轴的距离，越大表示离自己越近*/
background-color:#EBEBFF;/*为span设置背景*/
}

#footer{

margin: 0 2em;
border-top: 5px solid #d3d3d3;
color: #d3d3d3;
padding-top: 0;
clear: both;
line-height: 1.2

}

/*上面是博客的css样式*/

/*下面是一个编辑器的雏形，我看见了一个我的博客编辑器*/

<!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>
<style>
span{
width:400px;
height:500px;
display:block;
border-style:solid;
border-width:1px;
border-color:red;
/*重要的css属性，这个可以为标签添加滚动条
在style里面的注释不能用
*/
overflow: scroll !important;
}
</style>

</head>
<body>

<span id ="editor" contenteditable >
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
<br/>
<img src="E:\matrix.jpg" width="30px" height="40px"/>
</span>
</body>
</html>

/*上面是一个编辑器的雏形，我看见了一个我的博客编辑器*/

wylasr06

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的博客

/*下面是一个使用js实现的一个span在鼠标悬停时出现的提示框，并且提示框中的文字有不同的颜色*/用js实现同一个span的innerHTML的多种颜色/*虽然用hover这个选择器失败了，但还是感谢*/function show(){var msg=document.getElementById("b");msg.innerHTML="这里有个一
复制链接

扫一扫