Web前端学习阶段总结-------模仿百度页面

以“百度”首页为模板,设计百度仿真页面,效果如:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模仿百度</title>
</head>
<body>
    <p align="right">
        <a href="http://news.baidu.com/">新&nbsp;闻</a>&nbsp;&nbsp;
        <b>网&nbsp;页</b>&nbsp;&nbsp;
        <a href="https://tieba.baidu.com/index.html" title="贴吧">贴&nbsp;吧</a>&nbsp;&nbsp;
        <a href="https://map.baidu.com/"title="地图">地&nbsp;图</a>&nbsp;&nbsp;
        <a href="http://v.baidu.com/"title="视频">视&nbsp;频</a>&nbsp;&nbsp;
        <a href="http://music.taihe.com/">音&nbsp;乐</a>&nbsp;&nbsp;
        <a href=""title="知道">知&nbsp;道&nbsp;</a>
        <a href="https://image.baidu.com/" title="图片">图&nbsp;片</a>
    </p>
    <hr>
    <p align="center"><img height="150" width="400" border="0" src="bd_logo1.png"></p><br>

    <p align="center">
        <input type="text" size="70">
        <input type="button"name="baidu" value="百度一下">
    </p>
    <p align="center">问题反馈请<a href="mailto:[email protected][email protected]&[email protected]
&subject=问题反馈&body=写出你的问题">发送邮件</a>
    </p>
</body>
</html>

原文地址:https://www.cnblogs.com/czsy/p/9354051.html

时间: 2024-10-10 05:47:42

Web前端学习阶段总结-------模仿百度页面的相关文章

Web前端学习第十三天&#183;fighting_HTML页面设计技巧总结(二)

行级元素之间的空白距离 如下图所示:(看似是一张图,实际上是三张图分别放在<a>标签中实现,如果没有经过特殊的处理,那么图与图之间就会留有空隙,影响页面布局的效果) 示例代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <t

好程序员web前端学习路线分享jQuery学习技巧

好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! 1.关于页面元素的引用 通过jquery的$引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

好程序员web前端学习路线分享纯css绘制各种图形

好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形.矩形.圆形.椭圆形.对话泡泡等,让整个页面看起来不会太单调.作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够.那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形.正方形.圆形.椭圆,其实不然,

Web前端学习小建议

这里跟大家扯一扯学习前端的小方法,是我自己的学习方法,大家凑合看看,倒也不一定对~ 在写css前,其实html的结构要是比较合理的,这样写css也会比较顺手.在写一个网页之前,建议先琢磨几分钟,不要上来就写.多去看看别人是怎么写的,然后结合自己的项目,心中有一个大致规划.可以先把最外层轮廓写好,先不着急去写某一个具体的部分. 这里给大家分享一些css小技巧: 1.使用reset.css火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同.这种情况下,使用reset.css重置所有的基本样

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

web前端学习的基础知识1

Web前端是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.目前看来,这个一个就业前景很大的职业. web前端的学习不能一蹴而就,也不是那么轻而易举就能够学会的,需要我们慢慢的去学习,去理解. 今天,给大家说的就是一些web前端学习中的一些基础知识. web前端中使用的语言不是我们人与人之间进行交流的语言,而是计算机语言.计算机的语言有很多种:C.PHP.Rudy.Java.C#.Basic.JS.....这里主要