医药协会网站-前端网页技术设计HTML+CSS精美完整网页网站源码

简介: 医药协会网站-前端网页技术设计HTML+CSS精美完整网页网站源码

微信公众号:创享日记

发送:医药协会网站

获取完整源码


e8af0409573242f1868cd54fb3e38eb1.png


效果图预览①主页首页


3b236f67078e4cbaa99e88fecb4b49af.png


效果图预览②资源下载中心


6f4194a0702e4b48968a5dc110e3ac25.png


效果图预览③登录/注册


b6463131e31a467a97ef9c49b9f2e651.png7fd1e90e9ea44defb8e3fd9f60adeea7.png


效果图预览④文章资讯详情


45a2bfe874bc44e59dbd4929bf8cb3a0.png


效果图预览⑤文章资讯列表


043119e058bf4e12862071ce5f564073.png


效果图预览⑥留言板


87907ac4bd2d42e69633a98d4694ee38.png


效果图预览⑦图文列表


fed564b1d6934bc588a352005110d76d.png


效果图预览⑧图文详情


3b35713a52824405a1510a1cab0d5edf.png


源码详见微信公众号下载!


<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/CabinSketch_700.font.js"></script>
<script type="text/javascript" src="js/EB_Garamond_400.font.js"></script>
<!-- [if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<style type="text/css">
.bg {behavior:url(js/PIE.htc)}
</style>
<![endif]-->
<!-- [if lt IE 7]>
<div style='clear:both;text-align:center;position:relative'>
  <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
</head>
<body id="page1">
<div class="main">
<!-- header -->
  <header>
  <div class="wrapper">
    <nav>
    <ul id="menu">
      <li id="menu_active"><a href="index.html"><span>A</span>bout</a></li>
      <li><a href="Services.html"><span>S</span>ervices</a></li>
      <li><a href="Gallery.html"><span>G</span>allery</a></li>
      <li><a href="Privacy.html"><span>P</span>rivacy</a></li>
      <li><a href="Contacts.html"><span>C</span>ontacts</a></li>
    </ul>
    </nav>
  </div>
  <h1><a href="index.html" id="logo">DesignStudio.com</a></h1>
  </header><div class="ic">More Website Templates at TemplateMonster.com!</div>
<!-- / header -->
<!-- content -->
  <section id="content">
  <div class="wrapper">
    <article class="col1">
    <h2>About Us</h2>
    <div class="pad_left1 pad_bot1">
      <div id="slider">
      <div id="for_img">
        <div id="nivo_slider">
        <img src="images/img1.jpg" alt="">
        <img src="images/img2.jpg" alt="">
        <img src="images/img3.jpg" alt="">
        <img src="images/img4.jpg" alt="">
        <img src="images/img5.jpg" alt="">
        </div>
      </div>
      </div>
      <div class="pad">
      <p><strong>Design Studio</strong> Template is one of <a href="http://blog.templatemonster.com/free-website-templates/" target="_blank">free website templates</a> created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution. It is also XHTML &amp; CSS valid.</p>
      <p>This <a href="http://blog.templatemonster.com/2011/04/04/free-website-template-web-design-studio/" target="_blank">Free Design Studio Website Template</a> goes with two packages – with PSD source files and without them. PSD source files are available for free for the registered members of Templates.com. The basic package (without PSD source is available for anyone without registration).</p>
      </div>
    </div>
    <h2><span>Our Solutions</span></h2>
    <div class="pad_left1">
      <div class="pad_left1">
      <div class="wrapper pad_top1">
        <div class="col3">
        <div class="wrapper">
          <figure class="left marg_right1"><img src="images/page1_img3.png" alt=""></figure>
          <p class="cols"><strong class="font1">Development</strong><br>Error sit voluptatem accus antium doloremque laiantium totam rem aperiam, eaque tecto beatae.</p>
        </div>
        </div>
        <div class="col3 pad_left2">
        <div class="wrapper">
          <figure class="left marg_right1"><img src="images/page1_img5.png" alt=""></figure>
          <p class="cols"><strong class="font1">Creative Design</strong><br>Eorporis suscipit laboriosam, nisi ut aliquid ex ea commodi eum iure reprehenderit qui in ea voluptate.</p>
        </div>
        </div>
      </div>
      <div class="wrapper">
        <div class="col3">
        <div class="wrapper">
          <figure class="left marg_right1"><img src="images/page1_img4.png" alt=""></figure>
          <div class="cols"><strong class="font1">Planning</strong><br>Eius modi tempora incidunt aliquam quaerat enim ad minima veniam, quis nostrum exercitationem ullam.</div>
        </div>
        </div>
        <div class="col3 pad_left2">
        <div class="wrapper">
          <figure class="left marg_right1"><img src="images/page1_img6.png" alt=""></figure>
          <div class="cols"><strong class="font1">Effective Strategies</strong><br>Velit esse quam nihil molestiae consequatur, vel illumqui dolorem eum fugiat voluptas laiantium totam rem.</div>
        </div>
        </div>
      </div>
      </div>
    </div>
      </article>
    <article class="col2">
    <h3>Latest Works</h3>
    <ul class="ul_works">
      <li><a href="#"><img src="images/page1_img1.png" alt=""></a></li>
      <li><a href="#"><img src="images/page1_img2.png" alt=""></a></li>
    </ul>
    <h4>Recent Tweets</h4>
    <div class="tweets">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.<br><a href="#">20 days ago</a></p>
      <p>Accusantium doloremque laudatium, totam rem aperiam, eaque ipsa.<br><a href="#">36 days ago</a></p>
      <p>Nemo enim ipsam voluptatem quia voluptas.<br><a href="#">54 days ago</a></p>
    </div>
      </article>
  </div>
  </section>
<!-- / content -->
<!-- footer -->
  <footer>
  <div class="wrapper">
    <article class="col">
    <h5>Why Us</h5>
    <ul class="list1">
      <li><a href="#">Sedut perspiciatis</a></li>
      <li><a href="#">Unde omnis iste</a></li>
      <li><a href="#">Natus error sit </a></li>
      <li><a href="#">Volupttem accus</a></li>
      <li><a href="#">Ntium doloremque </a></li>
    </ul>
    </article>
    <article class="col pad_left2">
    <h5>Links</h5>
    <ul class="list1">
      <li><a href="#">Audantium, totam</a></li>
      <li><a href="#">Remaperiam, eaque</a></li>
      <li><a href="#">Ipsa quae abillo</a></li>
      <li><a href="#">Inventore veritatis et </a></li>
      <li><a href="#">Quasi architecto </a></li>
    </ul>
    </article>
    <article class="col pad_left2">
    <h5>Follow Us</h5>
    <ul class="icons">
      <li><a href="#"><img src="images/icon1.jpg" alt="">Facebook</a></li>
      <li><a href="#"><img src="images/icon2.jpg" alt="">Stumleupon</a></li>
      <li><a href="#"><img src="images/icon3.jpg" alt="">Twitter</a></li>
      <li><a href="#"><img src="images/icon4.jpg" alt="">Digg</a></li>
      <li><a href="#"><img src="images/icon5.jpg" alt="">RSS Feed</a></li>
    </ul>
    </article>
    <article id="newsletter">
    <h5>Newsletter</h5>
    <form id="newsletter_form">
      <div class="wrapper">
      <input class="input" type="text" value="Enter your email here" onblur="if(this.value=='') this.value='Enter your email here'" onFocus="if(this.value =='Enter your email here' ) this.value=''" >
      </div>
      <a href="#" onClick="document.getElementById('newsletter_form').submit()">Subscribe</a>
    </form>
    </article>
  </div>
  <article class="privacy">
    <a rel="nofollow" href="http://www.templatemonster.com/">Website template</a> designed by TemplateMonster.com<br><a href="http://www.templates.com/product/3d-models/">3D Models</a> provided by Templates.com
  </article>
  <a href="index.html" class="footer_logo">Design<span>Studio</span>.com</a>
  </footer>
<!-- / footer -->
</div>
<script type="text/javascript">Cufon.now();</script>
<script type="text/javascript">
  $(window).load(function() {
  $('#nivo_slider').nivoSlider({
  effect:'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'
  slices:7,
  animSpeed:500,
  pauseTime:6000,
  startSlide:0, //Set starting Slide (0 index)
  directionNav:true, //Next & Prev
  directionNavHide:false, //Only show on hover
  controlNav:true, //1,2,3...
  controlNavThumbs:false, //Use thumbnails for Control Nav
  controlNavThumbsFromRel:false, //Use image rel for thumbs
  controlNavThumbsSearch: '.jpg', //Replace this with...
  controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
  keyboardNav:true, //Use left & right arrows
  pauseOnHover:true, //Stop animation while hovering
  manualAdvance:false, //Force manual transitions
  captionOpacity:1, //Universal caption opacity
  beforeChange:function(){},
  afterChange:function(){},
  slideshowEnd:function(){} //Triggers after all slides have been shown
  });
});
</script>
</body>
</html>


相关文章
|
15天前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
8天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
37 3
|
1月前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
76 30
|
28天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
35 6
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
47 5
|
1月前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
39 3
|
1月前
|
前端开发 JavaScript UED
惊呆了!这些前端技巧竟然能让你的网站秒变高大上,赶快学起来!
前端技术是网页设计的核心,能够显著提升用户体验和网站竞争力。本文介绍了三种实用的前端技巧:动态背景效果、微交互设计和响应式设计。通过CSS动画和JavaScript,可以实现视觉吸引的动态背景;微交互设计如按钮点击效果能增强用户参与感;响应式设计则确保网站在不同设备上呈现良好效果。这些技巧简单易学,效果显著,值得尝试。
33 3
|
1月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
35 3
|
1月前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
1月前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
36 5