记一次写网站尝试-第一周

最新推荐文章于 2024-05-21 18:11:13 发布

常用常新

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量179

点赞数 1

分类专栏：前端学习第一次写网站文章标签： html css js web

本文链接：https://blog.csdn.net/m0_51939262/article/details/113091949

版权

前端学习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

第一次写网站

1 篇文章 0 订阅

订阅专栏

据sdfj官网，掌握以html、css为主，js、ps为辅的前端知识，写出自己的网站

问题1：多张网页公共部分的处理

asp语言和PHP语言：新技术
iframe：代码排版容易混乱
js.load：主要掌握

值得注意的是：footer.html的页代码中如果使用到js，需要在footer.html引入js，否则footer.html的js效果，将会失效

问题2：在网页引入视频

本地文件常用

<video class="fengniao" muted autoplay loop>
  <source src="../hjl_images/fengniao2.mp4">
</video>

muted：静音 autoplay：自动播放 loop：重复播放出现即代表True

网络文件常用

<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>

poster:视频数据无效时显示的图 preload：是否预加载，默认自动预加载 controls：是否显示播放条等

.fengniao{
    width: 100%;
    height: 100%;
    /* object-fit: fill; */
    /* margin: 0 auto; */
}

和div不一样前三个样式实现铺满全屏

问题3：如何把一个无序列表转换成横向菜单

<html>
<style type='text/css'>
#item ul{list-style:none;}
#item li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;text-align:center}
</style>
<body>
<div id='item'>
<ul>
 <li>星期一</li>
 <li>星期二</li>
 <li>星期三</li>
 <li>星期四</li>
 <li>星期五</li>
 <li>星期六</li>
 <li>星期七</li>
</ul>
</div>
</body>
</html>

问题4：代码规范

1. 全局通用样式（必写）

*{
    margin: 0;
    padding: 0;
}
body,html,.background-img{
    width: 100%;
    height: 100%;
}
/* 实现全屏背景图必要 */
/* 视频不一样，视频以原比例铺满屏 */
ul{
  list-style:none;
}
a{
  text-decoration: none;
}

必要原因

消除默认边框
元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，而默认状态下body高度不是100%

证明：默认状态下body不是高度100%显示的

body{background:#039; border:50px solid #C00;}

应用：透明层无论滚动与否都满屏显示

<!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=gb2312"/>

        <title>text</title>
        <style type="text/css">
            * html, body {/*inherit*/
                height: 100%;
                width:100%;
                overflow: hidden;
            }
            #div00 {/*layer*/
                position: absolute;
                z-index: 99;
                background: #000;
                opacity: 0.3;
                filter: alpha(opacity=30);
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
            }
            #div0 {/*parent*/
                height: 100%;
                overflow: scroll;
                position: absolute;
                left: 0;
                right: 0;
                z-index: 999;
            }
            #div1 {/*child*/
                width: 200px;
                height: 2000px;
                background-color: #0ff;
            }
        </style>
    </head>

    <body>
        <div id="div0">
            <div id="div1">
                asdfasdfasd
            </div>
        </div>
        <div id="div00"></div>
    </body>
</html>

解释
reason

2. 盒子的使用

body、form都是盒子
video和div有区别

3. css规范

0px，px可省
先布局再个体

问题5：布局

1. 清除浮动

对父容器设置overflow: hidden/auto，触发其BFC（BFC自行了解），设置hidden会导致超出部分直接被隐藏，且不占据文档流位置，而设置auto的话超出部分会生成一个滚动条，影响视觉效果。

资料源自网络，侵权必删

常用常新

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
记一次写网站尝试-第一周

据sdfj官网，掌握以html、css为主，js、ps为辅的前端知识，写出自己的网站问题1：多张网页公共部分的处理asp语言和PHP语言：新技术iframe：代码排版容易混乱js load：主要掌握值得注意的是：footer.html的页代码中如果使用到js，需要在footer.html引入js，否则footer.html的js效果，将会失效问题2：在网页引入视频本地文件常用<video class="fengniao" muted autoplay loop>
复制链接

扫一扫