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

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

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

  1. asp语言和PHP语言:新技术

  2. iframe:代码排版容易混乱

  3. 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

网络文件常用


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;
}

必要原因

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

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

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

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



<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

        <title>texttitle>
        <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>

解释
记一次写网站尝试-第一周_第1张图片

2. 盒子的使用

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

3. css规范

  1. 0px,px可省
  2. 先布局再个体

问题5:布局

1. 清除浮动

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

资料源自网络,侵权必删

你可能感兴趣的:(前端学习,html,css,js,web)