<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
  <channel>
    <title>年年有&quot;余&quot; - 项目实战</title>
    <link>https://www.yusian.com/bbs/forum-76-1.html</link>
    <description>Latest 20 threads of 项目实战</description>
    <copyright>Copyright(C) 年年有&quot;余&quot;</copyright>
    <generator>Discuz! Board by Comsenz Inc.</generator>
    <lastBuildDate>Tue, 05 May 2026 07:49:00 +0000</lastBuildDate>
    <ttl>60</ttl>
    <image>
      <url>https://www.yusian.com/bbs/static/image/common/logo_88_31.gif</url>
      <title>年年有&quot;余&quot;</title>
      <link>https://www.yusian.com/bbs/</link>
    </image>
    <item>
      <title>第五讲：简单html+css综合演练--整体效果</title>
      <link>https://www.yusian.com/bbs/thread-11213-1-1.html</link>
      <description><![CDATA[1、整体效果图



2、代码示例：
index.html[mw_shl_code=html,true]


  
  
  
  
  
  香菇街


  
    
      
        首页
      
      
        我的收藏
        我的收藏
        我的收藏
        我的收藏
      
    
  


  
    
      
        香菇街
 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Sun, 07 Jan 2018 11:53:10 +0000</pubDate>
    </item>
    <item>
      <title>第四讲：简单html+css综合演练--副区域及底部</title>
      <link>https://www.yusian.com/bbs/thread-11212-1-1.html</link>
      <description><![CDATA[1、先上效果图：



2、结构分析，以一个单元为例
2.1、整体分为两个部分，文字标签加多图展示，多图以20%、30%、20%、30%比例分布；2.2、在每个格子里 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Sun, 07 Jan 2018 11:45:21 +0000</pubDate>
    </item>
    <item>
      <title>第三讲：简单html+css综合演练--主内容区域</title>
      <link>https://www.yusian.com/bbs/thread-11211-1-1.html</link>
      <description><![CDATA[1、先上效果图



2、结构分析
2.1、主体结构分为左中右，占比20%、60%、20%；2.2、左边部分通过多个div标签即可实现，伪类hover加样式模拟按钮效果；[mw_shl_code=html,true]
        item  ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Sun, 07 Jan 2018 09:51:01 +0000</pubDate>
    </item>
    <item>
      <title>第二讲：简单html+css综合演练--导航与头部</title>
      <link>https://www.yusian.com/bbs/thread-11209-1-1.html</link>
      <description><![CDATA[1、先上效果图



2、结构分析；
2.1、先将页面划分为四个部分：顶部导航、头部、主体、底部，这也是大多数页面的常规分法；
2.2、从大的方面先将结构搭好，不关心内部结构，不关心细节，给大的组件定义一个css类；
2.3、最粗的div结构如下：[mw_shl_code=html,true]


 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Sat, 06 Jan 2018 13:53:33 +0000</pubDate>
    </item>
    <item>
      <title>第一讲：简单html+css综合演练--准备工作</title>
      <link>https://www.yusian.com/bbs/thread-11208-1-1.html</link>
      <description><![CDATA[1、先看整体效果图（PS:该项目的内容来自表严肃的在线视频教程，链接地址：http://biaoyansu.com/11.x）



2、这里只涉及到Html与Css一些简单使用，综合演练搭建一个类似购物网站首页的基本框架；
2.1、这个示例的重点在于结构，不关心具体美化的细节，强调的是结构的 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Sat, 06 Jan 2018 07:16:28 +0000</pubDate>
    </item>
    <item>
      <title>15、商城首页制作实战训练--类表格内容制作</title>
      <link>https://www.yusian.com/bbs/thread-11138-1-1.html</link>
      <description><![CDATA[1、无图不说话：

2、类似这种表格式的列表，在页面中多处出现，所以很有必要对其进行抽象出来；
3、观察其样式一定是通过ul标签来实现，但有一列两列三列类似表格样式；
4、由于展示内容为实际数据部分，因此数据格式是动态的；
5、在li中通过固定的标签加类来完成结果 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Thu, 25 Feb 2016 08:48:55 +0000</pubDate>
    </item>
    <item>
      <title>14、商城首页制作实战训练--可重用的tab标签</title>
      <link>https://www.yusian.com/bbs/thread-11137-1-1.html</link>
      <description><![CDATA[1、不上图都不知道你在说什么

2、不多说了，直接上码吧
[mw_shl_code=css,false].tab {heigh ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Thu, 25 Feb 2016 02:38:21 +0000</pubDate>
    </item>
    <item>
      <title>13、商城首页制作实战训练--底部模块基本实现</title>
      <link>https://www.yusian.com/bbs/thread-11136-1-1.html</link>
      <description><![CDATA[1、底部页脚部分相对简单，因此这一讲将在线帮助、媒体声音这类简单的模块也一并做掉；
2、底部多个a标签换行再加一个p标签即可实现，调整下基本样式即可
[mw_shl_code=html,false]]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Thu, 25 Feb 2016 01:41:46 +0000</pubDate>
    </item>
    <item>
      <title>12、商城首页制作实战训练--登录模块基本实现</title>
      <link>https://www.yusian.com/bbs/thread-11135-1-1.html</link>
      <description><![CDATA[效果图：

1、页面结构分为标题、登录表单、底部链接三个部分组成；
2、标题在前面已经实现，但这里有所不同，所以CSS单独写一个login的类；
3、总体效果与全局的section_title类似，不同的是加渐变背景，加边框，高度根据实际做调整；
4、表单部分与底部放到一个div里 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Wed, 24 Feb 2016 09:38:28 +0000</pubDate>
    </item>
    <item>
      <title>11、商城首页制作实战训练--店铺列表基本实现</title>
      <link>https://www.yusian.com/bbs/thread-11134-1-1.html</link>
      <description><![CDATA[1、先看效果图：

2、标题选项卡前面已经实现，当前需要实现的是下面的内容部分；
3、内容主体为一个列表，右下角加一个“更多”的超链接；
4、列表使用ul实现，每个li又分为左右两部分；
5、左边为带链接的图片，使用a标签及div包裹起来；
6、右边另起一个div，内部和h ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Tue, 23 Feb 2016 06:12:54 +0000</pubDate>
    </item>
    <item>
      <title>10、商城首页制作实战训练--模块标题模块选项卡制作</title>
      <link>https://www.yusian.com/bbs/thread-11133-1-1.html</link>
      <description><![CDATA[1、先看效果图

2、先说标题，从样式上来看可定义其结构为h2标签中包含一个strong红色字体和一个span黑色字，右边带一个a链接图片；
3、为什么右边要是一个a链接图片呢？因为有些标题是没有那个小图标的所以要单独出来；
4、选项卡之前已经完成了外围样式，里面没有文字 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Tue, 23 Feb 2016 03:14:17 +0000</pubDate>
    </item>
    <item>
      <title>9、商城首页制作实战训练--video模块实现</title>
      <link>https://www.yusian.com/bbs/thread-11132-1-1.html</link>
      <description><![CDATA[1、先看效果图：

2、整体分为上中下三个部分：title，video，video_list；
3、title部分设计成一个h2标签，后面图标为设置了偏移量的h2标签，调整文字样式；
4、中间video暂时用图片代替；
5、video_list为ul+li的布局，li前面红色小点为li的背景，文字首行缩进；
6、u ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Tue, 23 Feb 2016 02:02:07 +0000</pubDate>
    </item>
    <item>
      <title>8、商城首页制作实战训练--搜索栏样式实现</title>
      <link>https://www.yusian.com/bbs/thread-11131-1-1.html</link>
      <description><![CDATA[0、效果图

1、背景是带边框的渐变背景；
2、整体分为5个部分：中间红色条（含标签选项卡）、左侧说明图、中间提交表单、右侧关键词、下面更新文章标题；3、中间红色条带标签选项卡，标签选项卡使用一组ul+li实现，编写li的两种样式，并通过绝对布局部署选项卡；
4、表 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Mon, 22 Feb 2016 15:02:55 +0000</pubDate>
    </item>
    <item>
      <title>7、商城首页制作实战训练--导航部分样式实现</title>
      <link>https://www.yusian.com/bbs/thread-11130-1-1.html</link>
      <description><![CDATA[1、将导航划分为三个部分，左中右结构，中间为logo，左右分别为ul+li
2、相对定位postion的说明：
2.1、absolute        生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；
2.2、如果要相对父元素进行定位，应该将父元素position设置成relative，否 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Mon, 22 Feb 2016 09:38:36 +0000</pubDate>
    </item>
    <item>
      <title>6、商城首页制作实战训练--头部样式及内容实现</title>
      <link>https://www.yusian.com/bbs/thread-11129-1-1.html</link>
      <description><![CDATA[1、头部可以切分为两个p段落，分别左右float，在p中放置a链接来实现；
2、分别编写边右a链接的样式，包括：边框、位置、阴影、hover、背景图片等；
3、样式调整与多浏览器适配
4、关键代码：
style.css[mw_shl_code=css,false]#header { height: 30px; border-radius:  ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Mon, 22 Feb 2016 08:51:39 +0000</pubDate>
    </item>
    <item>
      <title>5、商城首页制作实战训练--options模块化布局</title>
      <link>https://www.yusian.com/bbs/thread-11128-1-1.html</link>
      <description><![CDATA[1、完成选项卡效果样式

2、将这个div分为上下两个部分，下面单独一个div
3、上面用ul的两个li来实现，li分别float左右
4、li分为正常状态和选中状态，选中状态高度比正常状态高1个像素；
5、选中状态的背景设置为白色，覆盖下面div的边框，实现图中效果；
6、IE如果有 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Mon, 22 Feb 2016 07:44:28 +0000</pubDate>
    </item>
    <item>
      <title>4、商城首页制作实战训练--整体样式完善与优化</title>
      <link>https://www.yusian.com/bbs/thread-11127-1-1.html</link>
      <description><![CDATA[1、针对设计稿完善各div盒子的样式
2、部分代码
style.css[mw_shl_code=css,false]/* style reset */
body,h1,h2,h3,h4,p,ul,ol,form,input,textarea,th,td,select{margin: 0;padding: 0;}
em{font-style: normal;}
li{list-style: none;}
a{text-decoration: none;}
im ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Mon, 22 Feb 2016 07:10:09 +0000</pubDate>
    </item>
    <item>
      <title>3、商城首页制作实战训练--主体模块样式编写</title>
      <link>https://www.yusian.com/bbs/thread-11126-1-1.html</link>
      <description><![CDATA[1、从上至下开始编写整体样式；
2、先编写样式的宽、高、外边距、内边及圆角等基本样式；
3、部分代码；
style.css[mw_shl_code=css,false]/* style reset */
body,h1,h2,h3,h4,p,ul,ol,form,input,textarea,th,td,select{margin: 0;padding: 0;}
em{font-style: normal ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Mon, 22 Feb 2016 03:53:48 +0000</pubDate>
    </item>
    <item>
      <title>2、商城首页制作实战训练--页面布局分析</title>
      <link>https://www.yusian.com/bbs/thread-11125-1-1.html</link>
      <description><![CDATA[1、网页结构分析，归纳出基本布局框架；
1.1、页面整体从上至下分为头部、导航、搜索、主体、底部组成；
1.2、主体部分又分为左边的内容区域与右边的边栏区域；
1.3、主体部分包含的几种结构提取出来设置公共样式类；
2、用div将整体页面框架划分好
3、提取公共样式，如 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Mon, 22 Feb 2016 03:27:21 +0000</pubDate>
    </item>
    <item>
      <title>1、商城首页制作实战训练--基本结构搭建</title>
      <link>https://www.yusian.com/bbs/thread-11124-1-1.html</link>
      <description><![CDATA[1、搭建网站基本结构，在根目录下分别创建css、img、js目录
2、根目录下创建index.html文件
3、在css目录下创建基本样式文件style.css并重置基本元素样式
4、下载jQuery框架压缩包至js目录
5、最终效果图如下所示：

6、部分代码
index.html[mw_shl_code=html,false]


 ...]]></description>
      <category>项目实战</category>
      <author>Sian</author>
      <pubDate>Mon, 22 Feb 2016 02:11:01 +0000</pubDate>
    </item>
  </channel>
</rss>