重工电子论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz

HTML&CSS记录帖

查看数: 14808 | 评论数: 12 | 收藏 0
关灯 | 提示:支持键盘翻页<-左 右->
    组图打开中,请稍候......
发布时间: 2016-4-28 00:09

正文摘要:

本帖最后由 李维强-15级 于 2016-4-28 00:55 编辑 <ul>标签      unordered list <ol>标签     ordered list <li>标签       list i ...

回复

李维强-15级 发表于 2017-4-1 14:33:16
Position属性之relative和absolute用法
http://www.jb51.net/article/76346.htm
李维强-15级 发表于 2016-11-27 22:05:37
CSS 中 # 和 . 的区别


id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等;用#top的形式来定义;

class:用来定义一些比较细节的样式,如具体的一个菜单,一行文字等,用.text的形式来定义。

定义HTML中的标签,如ul,img,p等时,直接写:img{}



以上摘自网络:



#main和.main有什么区别:


#main 定义的是ID为"main"这个元素的样式
.main 的意思是新建一个名为"main"的样式
#main 只能定义ID为"main"这个元素的样式
.main 一但定义以后,可以让其他的元素来调用,方法为class="main"

用#定义CSS样式,在调用时必须用ID,用.定义CSS样式,在调用时必须用CLASS。用
#定义的样式,一般都是定义结构框架,一些大的容器,且在同一个页面只能出现一
次;而且.定义的样式,一般都是起修饰作用或多次重复的样式。还一点就是在同一
个层里同时出现ID和CLASS样式,ID更优先于CLASS。

一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当
的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,
javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,
class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是
你可以在一个文档中使用任意次数的Class。

至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布
局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域
和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用
一次。而这些元素在同一页面中很少会出现大于一次的情况。





class是样式组,用.style定义,class="style":
.style定义样式组,可以被反复调用,就是说你一个页面里,可以有多个元素用同一个style;

ID是固定标签,用#style1定义,ID="style1"
#style1定义固定标签,用于定义一个特定的元素,每个页面只能出现一次,不能反复调用。虽然现在有的网页多次调用#style1,但那是不规范的,在某些浏览器中也会无法解读造成页面出错。



class可以在页面里面重复使用,id由于在页面里面只能出现一次,所以不能重复使用,所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。

    这种情况尽量用id:页面大的模块里面,用id来区分不同的模块。比如页面里面有这样的模块:最新新闻,推荐新闻等。就可以考虑用id来区分。

    还有一点,由于id是页面中唯一的,更多的是定义来留给给页面里面的 javascript用。

    补充:class和id在页面里面的使用方法:

    class:

     <style type="text/css">

        .footer{background:red;}

     </style>

     <div class="footer">footer</div>

    id:

     <style type="text/css">

        #footer{background:red;}

     </style>

     <div id="footer">footer</div>

     定义class的css是用点:“.”,如.footer

     定义id的css是用井号“#”,如#footer
李维强-15级 发表于 2016-10-6 16:22:25
本帖最后由 李维强-15级 于 2016-10-6 16:23 编辑

<iframe>标签使用详解
http://www.jb51.net/web/58424.html
<iframe>高度自适应以及透明的方法详解
http://www.jb51.net/article/15780.htm
李维强-15级 发表于 2016-9-21 03:14:53
    <div style="width:100%;height:auto">  
    <video controls="controls" width="100%"  preload="none"  id="video1" src='../content/aa123.mp4'></video>  
    </div>

HTML5里面 video标签直接就是播放器了,播放器的height优先级永远高于width,
适配屏幕宽度,要么直接width直接设置为100%,要么执行以下代码

  1.     <div style="width:100%;height:auto">  
  2.     <video controls="controls" width="100%"  preload="none"  id="video1" src='../content/aa123.mp4'></video>  
  3.     </div>

  4.    <script type="text/javascript">
  5.        //var videoElement = elements.find("video").first().attr("width", screenWidth).attr("height", screenWidth * 0.57);
  6.        //videoElement.attr("width", screenWidth).attr("height", screenWidth * 0.57);
  7.        var a = 0;
  8.        function myResize() {
  9.            var videoElement = document.getElementById("video1");
  10.           videoElement.setAttribute("width", document.body.clientWidth);        //获取body的宽度
  11.            //videoElement.setAttribute("width", "100%");                          //直接设置为100
  12.           videoElement.setAttribute("height", document.body.clientWidth * 0.57);//设置高度为16:9
  13.           a++;
  14.           alert(a);
  15.        }
  16.        window.onresize = function () { setTimeout("myResize()", 100) };//这句话是为了兼容IE等浏览器,因为IE会两次触发onresize        
  17.     </script>
复制代码
李维强-15级 发表于 2016-9-18 22:47:33
A标签 target="_blank",在新窗口里面打开连接


李维强-15级 发表于 2016-9-18 00:32:51
锚点:
在html里面直接<a href="XXX.HTML#anchor">aaaaaaaaa</a> 其中anchor就是XXX.HTML页面里面的一个ID
但是在XXX.aspx页面里面 直接<a href="#anchor">aaaaaaaaa</a>就是跳转到当前页面里面的锚点。
在MVC里面,要跳锚点,要根据路由规则来跳,例如<a href="../news1/index#abc">aaaaaaaaaaa</a>

Archiver|手机版|小黑屋|cqutlab ( 渝ICP备15004556号

GMT+8, 2024-12-23 03:38 , Processed in 0.219488 second(s), 32 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表