分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

导航,头部,CSS基础

发布时间:2023-09-06 01:18责任编辑:林大明关键词:CSS

  1. 制作自己的导航条。
  2. HTML头部元素:
    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式文件
    3. <link>  定义了一个文档和外部资源之间的关系
  3. 练习样式表:
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
  4. 分别练习定义三类选择器:
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器
      <!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title >广州商学院</title> ???<base href="http://www.gzcc.cn/"> ???<link rel="stylesheet"type="text/css"href="test1.css"> ???<style type="text/css"> ????p{ ???????????color: black; ???????} ???????h2{ ????background-color: blue; ???????} ??????.textyellow{ ???????????color:green; ??????????????????} ???????#aa{ ???????????color: red; ???????}</style></head><body ><nav> ???<img src="http://www.gzcc.cn/2016/images/banner.png"><br> ???<a href="">首页</a> ???<a href="">下载</a> ???<input type="text"name="search"> ???<button type="submit">搜索</button> ???<a href="">登录</a> ???<a href="">注册</a> ???</nav> <p style="color: red;margin-left: 20px;">校园新闻</p> ??????<p>校园新闻</p> ??????<h3 id="2015">2015</h3> ??????<script> ??????????document.write(Date()) ???document.getElementById("2015").innerHTML=""; ??????</script><br> ??????<div id="container" style="width: 400px "> ???<div id="header" style="background-color:blue"><h2 align="center" style="margin-bottom: 0;">用户登录</h2></div> ??????<div id="content" style="background-color:#EEEEEE;height: 180px;width: 400px;float: left;text-align:center;"> ??????????<form > ??????????用户名:<input type="text" name="username"placeholder="请输入用户名"><br><br> ??????密码:<input type="Password" name="passname"placeholde=""><br><br> ???????????<input type="radio" value="student">学生 ???????????<input type="radio" value="teacher">教师 <br> ???????????<input type="button" value="登录" > ???????????<input type="button" value="重置"> ???????????</form> ??????</div> ??????????<div id="footer" style="background-color:blue;clear:both;text-align:center;">版权 ? 广州商学院</div><br><br><h2>通知</h2> ??????????<p id="aa">广州商学院即将举办校运会放假3天!</p> ??????????<p >当天是双十一!</p><p class="textyellow">购物车又要满了!!</p><div>广州商学院即将举办校运会<span style="background-color: red;font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;font-size: 50px;color: black">放假3天!</span></div></body></html>

        

导航,头部,CSS基础

原文地址:http://www.cnblogs.com/suxihong/p/7680840.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved