前端学习笔记-BBC网站复刻

最新推荐文章于 2023-05-20 14:36:51 发布

vincent_chan7

最新推荐文章于 2023-05-20 14:36:51 发布

阅读量951

点赞数 1

本文链接：https://blog.csdn.net/everest115/article/details/80268062

版权

刚开始学习前端，学了HTML和CSS之后，自己照着BBC网站用学到的知识把整个网站复刻下来，仅仅只是把网站的模样复制过来，还没有交互的内容，继续学JS希望可以做出更好看的网站。

CSS学习过程中一开始对margin, border, padding难以区分，后来借鉴了w3school上的图，一目了然。
在加入同一类别的文字或图像，最好使用class标签，以便于统一对文字或图像进行修改。养成良好的编程习惯，e.g.缩进，命名等。
目前最大的疑惑就是对width的控制，经常需要微调才能达到理想的效果。

附源代码：

<html>
	<head>
		<title>Technology - BBC News</title>
		
		
		<style type="text/css">
		
			#topbar {
				width:1090px;
				margin:0 auto;
				height:40px;
			}
			
			body {
				margin:0;
				padding:0;
				font-family:Helvetica,Arial,sans-serif;
			}
			
			#logo {
				margin:8px;
				width:80px;
				float:left;
				margin-right:8px;
			
			}
			
			.topbar-section {
				float:left;
				border-left:1px #CCCCCC solid;
				height:100%;
			}
			
			#signin-image {
				width:25px;
				margin:8px 15px;
				float:left;
			}
			
			#signin-text {
				text-decoration:bold;
				position:relative;
				top:12px;
				padding-right:50px;
			}
			
			#wigglyline {
				float:left;
				height:40px;
				
			}
			
			#bell {
				height:25px;
				margin:9px 9px 0 9px;
			}
			
			#bell-div {
				float:left;
			}
			
			.topbar-menu {
				font-weight:bold;
				font-size:100%;
				padding:12px 15px 0 15px;
				height:27px;
				float:left;
			}
			
			#more-arrow {
				width:10px;
				margin-left:20px;
			}
			
			#search-box {
				background-color:#E4E4E4;
				border:none;
				font-weight:bold;
				font-size:14px;
				padding:5px;
				margin:5px 0 5px 5px;
				float:left;
				
			}
			
			#magnifying-glass {
				height:27px;
				margin-top:

最低0.47元/天解锁文章

vincent_chan7

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端学习笔记-BBC网站复刻

刚开始学习前端，学了HTML和CSS之后，自己照着BBC网站用学到的知识把整个网站复刻下来，仅仅只是把网站的模样复制过来，还没有交互的内容，继续学JS希望可以做出更好看的网站。CSS学习过程中一开始对margin, border, padding难以区分，后来借鉴了w3school上的图，一目了然。在加入同一类别的文字或图像，最好使用class标签，以便于统一对文字或图像进行修改。养成良好的编程习...
复制链接

扫一扫