医药公司的html和CSS文件1

最新推荐文章于 2023-12-07 15:21:51 发布

liu1992452008

最新推荐文章于 2023-12-07 15:21:51 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/75330155

CSS3 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个网站的基本HTML和CSS布局结构，包括顶部导航、头部搜索、菜单栏、主要内容区域和底部版权信息等内容。该网站主要服务于标准物质、化学品及相关实验室耗材的销售。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*** HTML文件我引用的代码片

<！doctype html>
<HTML>
<HEAD>
	<meta http-equiv =“Content-type”content =“text / html; charset = utf-8”/>
	<TITLE> </ TITLE>
	<link rel =“stylesheet”href =“css / style.css”type =“text / css”media =“all”/>
</ HEAD>
<BODY>
<div class =“top1”>
	<div class =“top”>
		<div class =“top_right”>
			<a href="#">返回首页</a>
			<跨度> | </跨度>
			<a href="#">联系我们</a>
			<跨度> | </跨度>
			<a href="#">客户登录</a>
		</ DIV>
	</ DIV>
</ DIV>

<div class =“header”>
	<div class =“logo”> <a href="index.html"> <img src =“images / logo.png”> </a> </ div>
	<form action =“＃”method =“get”>
		<select class =“select select1”>  
			<option value =“1”>化学试剂</ option>  
			<option value =“2”>标准品</ option>  
			<option value =“3”>大包装产品</ option>  
			<option value =“4”>试验仪器耗材</ option>  
		</选择> 
		<select class =“select”>  
			<option value =“1”> CAS号</ option>  
			<option value =“2”> ECN号</ option>  
			<option value =“3”> MDL号</ option>  
			<option value =“4”>分子式</ option>  
			<option value =“5”>中文名称</ option>  
			<option value =“6”>产品编号</ option>   
		</选择> 
		<input type =“text”class =“search”value =“请输入关键字...”>
		<span class =“search_btn”> </ span>
	</ FORM>
</ DIV>

<div class =“menu”>
	<UL>
		<li> <a href="index.html">首页</a> </ li>
		<li> <a href="about.html">关于我们</a> </ li>
		<li> <a href="list_products.html">产品中心</a> </ li>
		<li> <a href="#">资料中心</a> </ li>
		<li> <a href="#">服务支持</a> </ li>
		<li> <a href="#">人力资源</a> </ li>
		<li> <a href="#">客户中心</a> </ li>
	</ UL>
</ DIV>

<div class =“banner1”> <img src =“images / banner1.jpg”> </ div>

<div class =“main”style =“background：none;”>
	<div class =“list_top”> </ div>
	<div class =“list_con”>
		<div class =“list_con_left”>
			<div class =“list_con_title left_about”> </ div>
			<div class =“list_con_left_con”>
				<UL>
					<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>
			<div class =“list_con_bottom”> </ div>
		</ DIV>
		<div class =“list_con_right”>
			<div class =“list_con_right_title”>
            	<跨度>
                	<a href="#">首页</a>
                    >
                	<a href="#">关于我们</a>
                    >
                	<a href="#">公司简介</a>
                </跨度>
                <H1>关于我们</ H1>
            </ DIV>
			<div class =“list_con_right_con”>
				<div class =“list_con_right_con_img”>
					<img src =“images / right_about.jpg”>
				</ DIV>
                <div class =“list_con_right_con_text”>
                	<P>西南标准物质中心，隶属于成都智多星医药科技有限公司是西南地区权威专业的标准物质，标准样品信息平台，主营标准物质，标准样品，化学对照品，精细化工，仪器仪表等数十万种实验室所需试剂耗材及进口标准品......产品已经涉及到国内质检，农检，计量，药监，水质，生物，医疗，环保等众多领域。</ p>
<P>公司技术实力雄厚，拥有一批高素质的科研队伍，具备很强的技术开发和研发能力，在研究，生产及创新等方面有很丰富的技术储备和经验，并掌握着其先进的理论原理和实施方法。
以人为本，致力于满足客户需求为己任，真诚希望与您携手共进，创造美好的未来。</ P>
                </ DIV>
			</ DIV>
		</ DIV>
	</ DIV>
	<div class =“list_bottom”> </ div>
</ DIV>


<div class =“footer”>
	<UL>
		<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>
		<li> <a href="#">人力资源</a> | </ li>
		<li> <a href="#">客户中心</a> </ li>
	</ UL>
	<div class =“footer_con”>
		版权所有：成都智多星医药科技有限公司<br>地址：四川省成都市锦江区联系电话：028-68686868
	</ DIV>
	
</ DIV>
	
</ BODY>
</ HTML>

*** CSS文件

* {padding：0; 余量：0; 概要：0; }
身体 {
	背景：＃f2f2f2 url（'../ images / bg.jpg'）中心顶部不重复;
	font-family：Arial，sans-serif;
	font-size：12px;
	line-height：18px;
	颜色：＃515151;
}
一个{text-decoration：none; line-height：16px; color：＃555;}
a：hover {color：＃08979d;}
IMG {边界：0;余量：0;填充：0;}
李{列表样式类型：无;}

.top1 {width：100％;}
.top {width：1006px; 边距：0自动; height：20px;}
.top_right {float：right; 填充：0; margin：0;}
.top_right a {color：＃555555; 行高：20像素; text-decoration：none;}
.top_right a：hover {color：＃08979d;}

.header {height：80px; width：1006px; margin：0 auto;}
.header .logo {width：166px; height：66px; float：left; margin：0;}
表头形式{float：right; height：48px; width：494px; margin：14px 0px; 背景：url（'../ images / search_bg.png'）left top no-repeat;}
.select {float：left; border：1px solid＃08979d; height：23px; 宽度：自动; margin：8px 4px; * margin：8px 2px; 显示：内联;}
.select1 {保证金左：105px;}
.search {border：1px solid＃08979d; height：20px; width：110px; margin-top：9px; * margin-top：7px; margin-left：4px;}
.search_btn {浮动：右; height：23px; 宽度：60px; 边距：8像素; *的margin-top：-23px; 填充左：10px的; 背景：url（'../ images / search_btn.gif'）no-repeat;}

.menu {margin：0 auto; width：1006px; height：54px; 背景：url（'../ images / menu_bg.png'）no-repeat;}
.menu ul {float：left; 边距：0自动; width：1006px; height：54px;}
.menu ul li {float：left; margin：0 10px; width：120px; height：54px; 文本对齐：中心; 列表样式类型：无;}
.menu ul li a {float：left; width：120px; height：54px; 字体大小：14px的; 行高：54px; 颜色：#FFF; 文字装饰：无; 字体重量：粗体;}
.menu ul li a：hover {background：url（'../ images / menu_hover.png'）10px 0px no-repeat; 颜色：＃08979d;}
.menu .menu_a {color：＃08979d;}
.menu .menu_a：hover {color：#fff;}

.banner {margin：0 auto; width：1006px; height：auto;}

.main {width：1008px; height：auto; margin：0px auto; overflow：hidden;}
.main_index {height：396px; background：url（'../ images / main_bg.png'）top no-repeat;}

.content_top {width：974px; height：auto; margin：0px auto; overflow：hidden;}
.content_top_title {width：974px; height：52px; background：url（'../ images / content_top_title.gif'）center 15px no-repeat;}
.content_top_title ul li {float：left; margin：15px 0 0 0; 文本对齐：中心; 显示：内联;}
.content_top_title ul li a {width：120px; 高度：30PX; 显示：块; TEXT-INDENT：-9999px;}
#a {margin-left：20px;}
#b {margin-left：90px;}
#c {margin-left：130px;}
#d {margin-left：120px;}
.content_top_bottom {width：961px; height：23px; background：url（'../ images / content_top_bottom.gif'）center top no-repeat;}

.content_top_con {width：942px; height：auto; margin：0px auto; padding：8px; padding-top：0px; overflow：hidden; border：1px solid #ccc; border-top：0px;}
.content_top_con ul {float：left; width：25％; height：124px; background：＃f2fdfe url（'../ images / line1.jpg'）right top no-repeat;}
.content_top_con ul.ul_last {width：23.8％; background-image：none; padding-left：10px;}
.content_top_con ul li {float：left; width：80％; height：24px; margin：2px 0 0 18px; padding：0 0 4px 10px; background：url（'../ images / dot.gif'）left 6px no -重复;}
.content_top_con ul.ul_s li {float：left; width：auto; margin：2px 25px 0 20px; * margin：2px 25px 0 20px;}

.content_left {float：left; width：220px; height：auto; margin：0px 18px;}
.content_left_title {width：240px; height：36px; background：url（'../ images / content_left_title.gif'）left no-repeat;}
.content_left_title .more {float：right; font-size：10px; line-height：30px; color：＃08979d; margin：0px 10px;}
.content_left_con ul li {float：left; width：80％; height：24px; margin：2px 0 0 4px; padding：0 0 0 10px; background：url（'../ images / dot.gif'）left 6px no -重复;}

.content_middle {float：left; width：480px; height：auto; margin：0px 0px;}
.content_middle_title {width：480px; height：36px; background：url（'../ images / content_middle_title.gif'）left no-repeat; margin：0px 20px;}
.content_middle_title .more {float：right; font-size：10px; line-height：30px; color：＃08979d; margin：0px 30px;}
.content_middle_con ul li {float：left; width：110px; margin：2px 4px; border-right：1px dotted #ccc;}

.banner1 {margin：0 auto; width：1006px; height：auto;}

.list_top {width：1006px; height：11px; margin：0px auto; overflow：hidden; background：#efefef url（'../ images / list_top.gif'）no-repeat;}
.list_con {width：1006px; height：auto; margin：0px auto; overflow：hidden; background：#fff url（'../ images / list_con.gif'）repeat-y;}
.list_bottom {width：1006px; height：11px; margin：0px auto; overflow：hidden; background：#efefef url（'../ images / list_bottom.gif'）no-repeat;}
.list_con_left {浮动：左;宽度：256PX; height：545px; margin：0px 0 0 4px; padding：0 10px; background：#fff url（'../ images / line.gif'）right top no-repeat;}
.list_con_title {宽度：246px; 高度：38px;}
.left_about {background：url（'../ images / left_about.gif'）top no-repeat;}
.left_product {background：url（'../ images / left_product.gif'）top no-repeat;}
.list_con_left_con ul {width：246px; height：auto; overflow：hidden; padding：10px 0px; background：url（'../ images / list_ul_bg.gif'）repeat-y;}
.list_con_left_con ul li {width：242px; height：auto; padding：2px 0 0 0px; margin：10px 0;}
.list_con_left_con ul li a {float：left; width：242px; height：26px; line-height：24px; padding-left：106px; margin：4px 0; background：url（'../ images / left_list.jpg'）14px no-repeat;}
.list_con_left_con ul li a：hover {overflow：hidden; background：url（'../ images / left_list_hover.jpg'）14px no-repeat;}

dt.list_ul {浮动：左;宽度：240像素;高度：汽车;余量：0;填充：0像素;填充左：40像素;背景：无;}
dt.list_ul dl {width：100px; height：26px; margin：10px 0; display：inline;}
dt.list_ul dl a {float：left; width：100px; color：＃08979d; height：26px; line-height：24px; padding-left：0px; margin：0; background：none;}
dt.list_ul dl a：hover {text-decoration：underline; overflow：hidden; background：none;}

.list_con_bottom {宽度：246px; height：140px; background：url（'../ images / left_bottom.gif'）top no-repeat;}

.list_con_right {浮动：右;宽度：718px; 高度：自动;保证金右：8像素;背景色：#FFF;}
.list_con_right_title {宽度：718px; height：41px; background：url（'../ images / right_title_bg.gif'）top no-repeat;}
.list_con_right_title h1 {float：left; width：100px; color：#fff; 字体大小：12像素; margin：12px 60px;}
.list_con_right_title span {float：right; width：170px; color：#fff; line-height：44px; padding：0 10px 0 4px;}
.list_con_right_title span a {color：#fff;}

.list_con_right_con_img {margin：20px 4px 0 4px;}
.list_con_right_con_img p {margin：6px 4px; text-indent：24px; line-height：24px;}

.list_con_right_con_tab {width：718px; height：auto; margin：10px 4px;}
.protable {宽度：98％; 边框：0像素;边界崩溃：崩溃;}
.protable thead {width：684px; height：32px; line-height：32px; overflow：hidden; background：url（'../ images / thead.jpg'）repeat-x;}
.protable thead td {background：url（'../ images / thead_line.jpg'）4px 8px no-repeat;}

.protable tbody {width：684px; 高度：自动;}
.protable tbody td {height：30px;}
的.blue {COLOR：＃08979d}
a：hover.blue {color：＃555}

.color1 {背景色：＃f3f3f3;}

。第{高度：30像素;文本对齐：左;颜色：＃000; float：right; margin：10px 10px;}
.page dt {display：inline; 浮动：左;行高：的22px;高度：的22px;余量右：5像素;垂直对齐：中部; }
.page dt a {display：inline; 浮动：左; padding：0 5px; color：＃000; line-height：22px; border：#ddd 1px solid; color：＃333}
.page dt a：hover {text-decoration：none; color：＃08979d;}
.page .onnum {color：＃f48605; font-weight：bold; 边界：0;}

.list_con_right_con_text {margin：10px 8px; text-indent：24px; line-height：24px;}


.footer {width：1008px; height：auto; margin：10px auto; overflow：hidden;}
.footer ul {width：1006px; height：44px; padding-left：270px; background：url（'../ images / foot_bg.jpg'）0px center no-repeat;}
.footer ul li {float：left; width：auto; margin：0 8px; color：＃333;}
.footer ul li a {color：＃515151; line-height：44px; padding：10px 10px 0 0px;}
.footer ul li a：hover {color：＃f58314;}
.footer .footer_con {float：left; width：100％; height：auto; text-align：center; padding：10px 0px 10px 15px;}