1. 首页
  2. 文章中心
  3. 网页前端

创建一个网站需要的注意点 （自己看的）photos header {

78 阅读 0 评论
我是靠谱客的博主 专一美女，这篇文章主要介绍创建一个网站需要的注意点 （自己看的）photos header {，现在分享给大家，希望可以做个参考。

二：文档类型声明方式：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
　html:

　　　　过渡型：

　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　　　严格型:

　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

　　　　框架型:

　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

　　xml:

　　　　过渡型:

　　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　　　严格型:

　　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



　　　　框架型:

　　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

　　html5:

　　　　<!DOCTYPE html>

三、语义：

复制代码
1
html:没有体现结构语义化的标签，我们通常都是这样来命名的<div id="header"></div>.这样表示网站的头部。
复制代码
1
　　html5:在语义上却有很大的优势。提供了一些新的标签，比如:<header><article><footer>

html5格式： 可以用header和article代替div nav用来装导航

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
   <script src="scripts/modernizr-1.6.min.js"></script>
</head>
<body>
  <header>
  <nav>
  <ul>
  </ul>
  </nav>
  </header>
  <article>
  </article>
  </body>
</html>

css一般是四个

复制代码
1
2
3
4
5
6
7
1.basic.css把另外三个整合起来
@import url(color.css);
@import url(layout.css);
@import url(typography.css);
2.color.css 定义颜色
3.layout.css 定义布局 包括背景图片啥的
4.typography.css 定义字体大小啥的

表示全部设置距离为0 这样就可以把不同浏览器为元素设置的不同内外边距全都删除

复制代码
1
2
3
4
* {
  padding: 0;
  margin: 0;
}

设置ul导航栏为横向排列

复制代码
1
2
3
header nav li {
  display: inline;
}

设置背景图片

复制代码
1
background-image: url(../images/background.gif);

背景图片是否固定或者随着页面的其余部分滚动

复制代码
1
2
3
background-attachment    
scroll默认值 会随着其余部分滚动而移动
fixed 当页面的其余部分滚动时 背景图像不会移动

定位背景图像：

复制代码
1
2
background-position
一般center居中

是否及如何重复背景图像

复制代码
1
2
3
4
background-repeat
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 背景图像仅显示一次

举例：background-position: bottom right; 父窗体不是body而是 header 定义
背景图片的位置

复制代码
1
2
3
4
5
6
7
8
header {
  background-image: url(../images/guitarist.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
  border-width: .1em;
  border-style: solid;
  border-bottom-width: 0;
}

就近原则
1.如果是在同一个级别下 比如都是 p{} p{} 会按照加载的顺序后面的会覆盖掉前面的样式
2.不是一个级别下 听靠近那一方 比如 p{} p scan{} 最终听后者的样式定义

photos header {

background-image: url(../images/basshead.gif);
}
header {
background-image: url(../images/guitarist.gif);
}

定义版式 字体格式之类的：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
font-size: 76%;   字体大小
 font-size: 1em;
 font-family: "Helvetica","Arial",sans-serif;  字体格式
 font-weight: bold;        加粗
 text-decoration: none;    定义字体下划线啥的
 line-height: 10px         行基线的距离
 font：顺序
 •font-style
•font-variant   normal 默认值
•font-weight
•font-size/line-height
•font-family

js常见的函数：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}


function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

突出超链接 添加挂钩就可以对不同页面进行不同操作

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function highlightPage() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;  
  var headers = document.getElementsByTagName('header');
  if (headers.length == 0) return false;
  var navs = headers[0].getElementsByTagName('nav');
  if (navs.length == 0) return false;

  var links = navs[0].getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
      var linkurl;
      for (var i=0; i<links.length; i++) {
        linkurl = links[i].getAttribute("href");
        if (window.location.href.indexOf(linkurl) != -1) {
          links[i].className = "here";
          var linktext = links[i].lastChild.nodeValue.toLowerCase();
          document.body.setAttribute("id",linktext);
        }
      }
  }
}

如果想要实现内部页面链接跳转 需要 setion标签
每个链接包涵对应部分的id 开头的”#”表示内部链接 要提取一部分的id值
需要split 得到一个数组一个是#前面的内容 一个是#后面的内容
隐藏内容需要 元素.style.display=”none”;

如果局部变量和全局变量都无法完成任务的话 需要给元素赋值属性
比如 多个函数对同一个元素进行操作的时候要实现立即中断
还有同一个页面链接需要得到id

复制代码
1
2
3
4
5
6
7
8
9
表单中分组用<fieldset> 标签
<form method="post" action="submit.html">   method是规定用于发送 form-data 的 HTTP 方法
action是向何处发送表单
<input type="text" id="name" name="name" placeholder="Your name" required="required" />  
 placeholder="Your name"是占位符文本 提醒用户如何填写信息 required是必须填写信息  

 <input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
 <input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
 而thisform.onsubmit = function()是阻止属性 如果返回的是false则不提交
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<label for="name">Name:</label>
     <input type="text" id="name" name="name" placeholder="Your name" required="required" />
     label的for属性是用来关联的input的  label被单击时关联的表单字段获得焦点

     form对象：
     form.length返回的是表单元素   childNodes.length返回的是元素包涵所有节点的个数
     element.value保存的是表单元素的当前值
     如果有placeholder属性 就是它的属性 否则就是输入框中的内容

     function resetFields(whichform) {
  if (Modernizr.input.placeholder) return;
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.getAttribute('placeholder')) continue;
    element.onfocus = function() {
    if (this.value == this.getAttribute('placeholder')) {
      this.value = "";
     }
    }
    element.onblur = function() {
      if (this.value == "") {
        this.value = this.getAttribute('placeholder')||this.placeholder;
      }
    }
    element.onblur();
  }
}
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
将表单的内容传递给一个地址 然后更新原地址的<article>属性  输入框不能为空  emil框得有@和.
function focusLabels() {
  if (!document.getElementsByTagName) return false;
  var labels = document.getElementsByTagName("label");
  for (var i=0; i<labels.length; i++) {
    if (!labels[i].getAttribute("for")) continue;
    labels[i].onclick = function() {
      var id = this.getAttribute("for");
      if (!document.getElementById(id)) return false;
      var element = document.getElementById(id);
      element.focus();
    }
  }
}

function resetFields(whichform) {
  if (Modernizr.input.placeholder) return;
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.getAttribute('placeholder')) continue;
    element.onfocus = function() {
    if (this.value == this.getAttribute('placeholder')) {
      this.value = "";
     }
    }
    element.onblur = function() {
      if (this.value == "") {
        this.value = this.getAttribute('placeholder');
      }
    }
    element.onblur();
  }
}

function isFilled(field) {
  return (field.value.length > 1 && field.value != field.placeholder);
}

function isEmail(field) {
  return (field.value.indexOf("@") != -1 && field.value.indexOf(".") != -1);
}

function validateForm(whichform) {
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.getAttribute("required") == 'required') {
      if (!isFilled(element)) {
        alert("Please fill in the "+element.name+" field.");
        return false;
      }
    }
    if (element.getAttribute("type") == 'email') {
      if (!isEmail(element)) {
        alert("The "+element.name+" field must be a valid email address.");
        return false;
      }
    }
  }
  return true;
}

function prepareForms() {
  for (var i=0; i<document.forms.length; i++) {
    var thisform = document.forms[i];
    resetFields(thisform);
    thisform.onsubmit = function() {
      if (!validateForm(this)) return false;
      var article = document.getElementsByTagName('article')[0];
      if (submitFormWithAjax(this, article)) return false;
      return true;
    }
  }
}

// Ajax

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function getHTTPObject() {
  if (typeof XMLHttpRequest == "undefined")
    XMLHttpRequest = function () {
      try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
        catch (e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
        catch (e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP"); }
        catch (e) {}
      return false;
  }
  return new XMLHttpRequest();
}

function displayAjaxLoading(element) {
    // Remove the existing content.
  while (element.hasChildNodes()) {
      element.removeChild(element.lastChild);
  }
  //  Create a loading image.
  var content = document.createElement("img");
  content.setAttribute("src","images/loading.gif");
  content.setAttribute("alt","Loading...");
  // Append the loading element.
  element.appendChild(content);
}

function submitFormWithAjax( whichform, thetarget ) {

  var request = getHTTPObject();
  if (!request) { return false; }

  // Display a loading message.
  displayAjaxLoading(thetarget);

  // Collect the data.
  var dataParts = [];
  var element;
  for (var i=0; i<whichform.elements.length; i++) {
    element = whichform.elements[i];
    dataParts[i] = element.name + '=' + encodeURIComponent(element.value);
  }
  var data = dataParts.join('&');

  request.open('POST', whichform.getAttribute("action"), true);
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  request.onreadystatechange = function () {
    if (request.readyState == 4) {
        if (request.status == 200 || request.status == 0) {
          var matches = request.responseText.match(/<article>([sS]+)</article>/);
          if (matches.length > 0) {
            thetarget.innerHTML = matches[1];
          } else {
            thetarget.innerHTML = '<p>Oops, there was an error. Sorry.</p>';
          }
        } else {
          thetarget.innerHTML = '<p>' + request.statusText + '</p>';
        }
    }
  };

  request.send(data);

  return true;
};

最后

以上就是专一美女最近收集整理的关于创建一个网站需要的注意点 （自己看的）photos header {的全部内容，更多相关创建一个网站需要的注意点内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(52)

相关文章

搭建自己的神经网络模型时需要注意的两点经验分享
搭建自己的神经网络模型时需要注意的两点经验分享
HTTP协议的详解
HTTP协议的详解
搭建在线网校平台的三个好处
搭建在线网校平台的三个好处
K12在线教育产品分析：北京四中网校
K12在线教育产品分析：北京四中网校
创建一个网站需要的注意点 （自己看的）photos header {
创建一个网站需要的注意点 （自己看的）photos header {
深度学习与TensorFlow开发环境的搭建
深度学习与TensorFlow开发环境的搭建
搭建深度学习开发环境
搭建深度学习开发环境
深度学习环境搭建（ubuntu16.04+cuda8.0+cudnn6.0）
深度学习环境搭建（ubuntu16.04+cuda8.0+cudnn6.0）

评论列表共有 0 条评论

立即
投稿
返回
顶部