使用HTML和css制作简单的公司介绍网页

创作不易，可否给作者点个赞再走

HTML部分：

/**
* author 阿木木
* date 09/23  14:32
* /
<html><head><title>网站首页</title><link href="css/style.css" type="text/css" rel="stylesheet" /></head><body><div class="header"><div class="logo"><div class="logoleft fl"><a href=""><img src="img/logo.png"</a></div><div class="logoright fr"><a href=""><img src="img/header_text.png"</a></div><div class="clear"></div></div><div class="menu"><div class="menubtn fl"><a href="">全部课程</<a></div><ul class="fr"><li><a href="">首页</a></li><li><a href="">粤嵌动态</a></li><li><a href="">关于我们</a></li><li><a href="">师资力量</a></li><li><a href="">联系我们</a></li></ul><div class="clear"></div></div></div><div class="main"><div class="banner"><div class="title">高端培训专家-粤嵌教育</div></div><div class="nav"><ul><li><a href="">公司简介</a></li><li><a href="">发展历程</a></li><li><a href="">人才招聘</a></li><li><a href="">联系我们</a> </li></ul></div><div class="infobg"><div class="info">info</div></div></div><div class="footer">footer</div></body>
</html>

css部分：

/** 全局样式 **/
*{margin:0px;padding:0px;
}
body{font-size:14px;
}
li{list-style:none;
}
a{color:#000;text-decoration: none;
}
.fl{float:left;
}
.fr{float:right;
}
.clear{clear:both
}/** index.html **/
.header{width:1200px;margin:0px auto;
}
.logo{width:100%;height:56px;margin:20px 0px;
}
.logoleft{width:238px;height:56px;}
.logoright{width:259px;height:27px;
}
.menu{width:100%;height:50px;
}
.menubtn{width:242px;height:50px;/**background:url(../img/course_menu_bg.png) no-repeat;**/background-image: url(../img/course_menu_bg.png);background-repeat: no-repeat;padding-left: 100px;
}
.menubtn a{color: white;font-size: 18px;line-height: 50px;
}
.menu ul li{width:130px;height:50px;float:left;text-align: center;line-height:50px;
}
.menu ul li a{font-size: 16px;
}
.main{width:100%;
}
.banner{width:100%;height:400px;background:#000000 url("../img/banner.png") no-repeat center center;
}
.banner .title{text-align: center;color: white;font-size: 50px;padding-top: 155px;
}
.nav{width: 1200px;height: 80px;margin:0px auto;
}
.nav ul{padding: 20px 0px;
}
.nav ul li{width: 299px;height: 40px;float: left;text-align: center;line-height: 40px;
}
.nav ul li:nth-child(1),.nav ul li:nth-child(2),.nav ul li:nth-child(3)
{border-right: 1px #d9d9d9 solid;}
.nav ul li a{font-size: 18px;
}
.infobg{width: 100%;padding: 60px 0px;background-color:#f3f3f3;
}
.info{width: 1200px;height: 480px;background-color: #fff;margin: 0px auto;}
.footer{width:100%;height:120px;background:#23282d
}

运行后效果图：

图片可自行更改。

使用HTML和css制作简单的公司介绍网页相关推荐

运用css制作简单的体育新闻网页
源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...
html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面这是效果图这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
使用html和css制作简单的网页
使用html和css制作简单的网页创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 09/26 10:23 * / <html><he ...
HTML学生个人网站作业设计——html css javascript简单的大学生书店网页制作(13页) web期末作业设计网页 web结课作业的源码 web网页设计实例作业
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
HTML学生个人网站作业设计——HTML+CSS+JavaScript简单的大学生书店网页制作(13页) web期末作业设计网页 web结课作业的源码 web网页设计实例作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
CSS制作简单loading动画
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用"障眼法"做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止 ...
HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
html如何做滑动门效果,div+css制作简单滑动门效果
现在流行的网站设计中,水平导航菜单占据了大壁江山.的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计.而水平导航菜单中,又有绝大多数网站采用"滑动门"设计. 首 ...
CSS制作简单的横向菜单
1.先写一个列表,建立菜单的结构 <span style="font-size:14px;"><span style="font-size:14px;& ...

使用HTML和css制作简单的公司介绍网页

使用HTML和css制作简单的公司介绍网页

创作不易，可否给作者点个赞再走

使用HTML和css制作简单的公司介绍网页相关推荐

最新文章

热门文章