霍者博客

欢迎访问霍者博客(微信hylg1234)最新发布 练习题合集 软件合集 视频合集

CSS中`nav ul li ul` 与 `nav>ul>li` 这两种写法的区别是什么

<style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        nav ul li ul{
            display:none;
        }
        nav>ul>li{
            float:left;
            padding:10px;
            border:1px solid blue;
        }
        nav>ul>li>ul>li{
            padding:10px;
            border-bottom:1px solid #ccc;
        }
    </style>

>是指只能一代接一代,比如: nav>ul>li>ul>li,必须是下面这样的

...

div各行变色代码

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div各行变色代码</title>
<style type="text/css">
.container ul{margin:0;padding:0;}
.container li{cursor:pointer;height:30px;width:200px;background-color:#fff;line-height:30px; text-indent:1em;font-size:12px;}
.container .change{cursor:pointer;height:30px;width:200px;background-color:#ccc;line-height:30px; text-indent:1em;font-size:12px;}
.container .current{cursor:pointer;height:30px;width:200px;background-color:#ffc;line-height:30px; text-indent:1em;font-size:12px;}
</style>
<script type="text/javascript">
 window.onload = function() {
    changeColor('content');
    changeColor('content2');//写上要控制的UL的ID,想控制几个就控制几个
    changeColor('content3');
}
function changeColor(id) {
    var arrayli = document.getElementById(id).getElementsByTagName('li');
        var bool = true; //奇数行为true
        var oldStyle; //保存原有样式
        for(var i = 0;i<arrayli.length;i++){
            //各行变色
            if(bool === true){
                arrayli[i].className = "change";
                bool = false;
            }
            else {
                arrayli[i].className = "";
                bool = true;    
            }
            //划过变色
            arrayli[i].onmouseover = function() {
                oldStyle = this.className;
                this.className = "current"
            } 
            arrayli[i].onmouseout = function() {
                this.className = oldStyle;
            } 
        }
}
</script>
</head>
<body>
    <span>第一个UL</span>
    <div class="container">
        <ul id="content">
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
        </ul>
    </div>
    <br />
    <span>第二个UL</span>
    <div class="container">
        <ul id="content2">
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
        </ul>
    </div>
    <span>第三个UL</span>
    <div class="container">
        <ul id="content3">
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
            <li>隔行变色,划过变色</li>
        </ul>
    </div>
</body>
</html>

其实除了上面的用到的js以外,单纯的使用CSS3里的伪类:nth-child也是可以做出这个效果的。

...

CSS网页前端学习总的原则及打怪升级的学习方式

坦白的说呢,CSS网页前端学习如果没有人教你,没有人带你,想要实现在短时间内就学会,基本上是做不到的。

这也是我写这篇贴子的很重要的原因,这也是这篇贴子中最有价值的地方。

总的原则是:

    1.永远永远不要去先看视频,先看书。

    2.永远永远记着代码是写出来的,不是看出来的。

    3.永远永远记着要有自己独立学习独立解决问题的能力。

...

CSS学习笔记——定位position属性的学习

今天学习之前剩下的一个问题:CSS的position属性。首先归纳出和position相关的问题:

position作为一个属性,它一共有哪几个属性值?

position常用的属性值有哪几个?分别有什么特点?

第一个问题:position作为一个属性,它一共有哪几个属性值? 

对于position属性,他一共有5个值,分别是

1,static:默认值。没有定位,元素出现在正常的流中。

...

为什么要学习CSS+DIV技术?CSS技术适合谁学习?

首先要问人为什么要学习,为什么要有一技之长?

答:时代不断变化各行各业日新月异不学习就会很快落后,活到老学到老,人要有一技之长,技为安身立命之根本。

学习CSS+DIV技术,可以让你认识互联网,认识我们每天接触的网页,自己也能制作出这样的网页。

如果你不会程序后台开发,你同样可以建站,利用免费开源网站系统建立网站,要实现网站美工与他人不同,你可以购买网页美工图找人切图做成开源程序可用的模板即可建立自己漂亮网站。如果你没有那么多经济请人,你可以找人设计好网页美工图后,自己利用学习CSS技术做成HTML,再嵌入模板标签,做成自己网站。

...

如何做好网页的版式设计?

今天和大家分享网页设计应该注意的几点,让大家能在网站建设初期能更完美的完成网站规划。网页版式是整个网页的外观,其设计体现在页面的布局、颜色等。一般优秀的网页,会给浏览者留下深刻的印象和赏心悦目的感觉。所以,许多设计人员非常重视版式的设计效果,多数在布局与色彩上下很大的功夫。

1、 页面尺寸

在网页设计之前首先应确定网页的页面尺寸大小。合理地设置页面尺寸,可以使网页完整地显示于浏览器中,避免用户频繁地拖动滚动条。在设置页面尺寸时,还考虑到不同浏览器以及不同显示器分辨率的大小。

...

纯CSS制作三角箭头提示框

HTML代码:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="sanjiao.css">
<title>Test</title>
</head>
<body>
<div class="speech-bubble speech-bubble-top">
<b><a href="http://www.huozheweb.com/">更多学习</a>箭头向上</b>
</div>
<br/>
<div class="speech-bubble speech-bubble-bottom">
<p> <b><a href="http://www.huozheweb.com/">更多学习</a>箭头向下</b></p>
<div class="speech-bubble speech-bubble-left">
<p> <b><a href="http://www.huozheweb.com/">更多学习</a>箭头向左</b></p>
<div class="speech-bubble speech-bubble-right">
<p> <b><a href="http://www.huozheweb.com/">更多学习</a>箭头向右</b></p>
</div>
</body>
</html>

CSS样式:

...

CSS技巧—清除浮动

什么是CSS清除浮动?

在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

引用W3C的例子,news容器没有包围浮动的元素。

.news {
background-color: gray;
border: solid1pxblack;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg"/>
<p>some text</p>
</div>

...

必知HTML基础-CSS教程系列

一、必知HTML基础-CSS教程系列

目录

    搞清浏览器作用

    搞清什么是HTML

    html作用

    html我们涉及哪些基础知识

    常见html单词及单词功能作用有哪些

...