HTML代码
<!文档类型 网页类型> <网页 语言代码="中文"> <网页头部> <网页信息 文档编码="UTF8" /> <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" /> <网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" /> <网页标题>Document</网页标题> </网页头部> <网页主体> <!--这里编写网页代码--> <区块 类名="顶部导航盒子"> <区块 类名="顶部导航居中盒子"> <图片框 图像地址="@文件_logo1.png" 错替文本="" /> <超链接分组> <无序列表 类名="顶部导航超链接列表"> <列表项><超链接 链接地址="">首页</超链接></列表项> <列表项><超链接 链接地址="">课程</超链接></列表项> <列表项><超链接 链接地址="">源码</超链接></列表项> </无序列表> </超链接分组> <区块 类名="顶部导航搜索区域"> <数据框 属性名称="" 数据类型="文本输入" 默认提示="请输入搜索内容" 数据值=""> <按钮>搜索</按钮> </区块> <区块 类名="顶部导航头像区域"> <图片框 图像地址="@文件_head.png" 错替文本=""> <超链接 链接地址="">我是昵称</超链接> </区块> <!--SEO--> </区块> </区块> <区块 类名="广告图片区域"> <图片框 图像地址="@文件_head.png" 错替文本=""> </区块> <区块 类名="二级分类专区"> <行内元素>✅</行内元素> <无序列表> <列表项> <超链接 链接地址="" 类名="二级分类专区导航选中">初级案例</超链接> </列表项> <列表项> <超链接 链接地址="">中级案例</超链接> </列表项> <列表项> <超链接 链接地址="">高级案例</超链接> </列表项> <列表项> <超链接 链接地址="">成品案例</超链接> </列表项> </无序列表> <区块> <数据框 属性名称="" 数据类型="文本输入" 数据值=""> <按钮>搜索按钮</按钮> </区块> </区块> <区块 类名="内容大盒子"> <区块 类名="源码列表盒子"> <无序列表 类名="源码列表内容盒子"> <列表项> <图片框 图像地址="@文件_list.png" 错替文本=""> <区块 类名="源码列表内容标题盒子"> <区块> <超链接 类名="源码列表内容标题超链接" 链接地址="">快码编程-网站端完成快码论坛源码专区部分效果</超链接> <行内元素 类名="源码列表内容新内容">NEW</行内元素> </区块> <区块 类名="源码列表内容标题底部"> <超链接 链接地址="">【初级案例】</超链接> <行内元素>/</行内元素> <超链接 链接地址="">快码编程</超链接> </区块> </区块> <区块 类名="源码列表内容时间盒子"> <区块> <行内元素>8</行内元素> <行内元素>眼睛</行内元素> </区块> <区块> <行内元素>2023-03-31 11:48:24</行内元素> <行内元素>时钟</行内元素>
</区块> </区块> </列表项> <列表项> <图片框 图像地址="@文件_list.png" 错替文本=""> <区块 类名="源码列表内容标题盒子"> <区块> <超链接 类名="源码列表内容标题超链接" 链接地址="">快码编程-网站端完成快码论坛源码专区部分效果</超链接> <行内元素 类名="源码列表内容新内容">NEW</行内元素> </区块> <区块 类名="源码列表内容标题底部"> <超链接 链接地址="">【初级案例】</超链接> <行内元素>/</行内元素> <超链接 链接地址="">快码编程</超链接> </区块> </区块> <区块 类名="源码列表内容时间盒子"> <区块> <行内元素>8</行内元素> <行内元素>眼睛</行内元素> </区块> <区块> <行内元素>2023-03-31 11:48:24</行内元素> <行内元素>时钟</行内元素> </区块> </区块> </列表项> <列表项> <图片框 图像地址="@文件_list.png" 错替文本=""> <区块 类名="源码列表内容标题盒子"> <区块> <超链接 类名="源码列表内容标题超链接" 链接地址="">快码编程-网站端完成快码论坛源码专区部分效果</超链接> <行内元素 类名="源码列表内容新内容">NEW</行内元素> </区块> <区块 类名="源码列表内容标题底部"> <超链接 链接地址="">【初级案例】</超链接> <行内元素>/</行内元素> <超链接 链接地址="">快码编程</超链接> </区块> </区块> <区块 类名="源码列表内容时间盒子"> <区块> <行内元素>8</行内元素> <行内元素>眼睛</行内元素> </区块> <区块> <行内元素>2023-03-31 11:48:24</行内元素> <行内元素>时钟</行内元素> </区块> </区块> </列表项> <列表项> <图片框 图像地址="@文件_list.png" 错替文本=""> <区块 类名="源码列表内容标题盒子"> <区块> <超链接 类名="源码列表内容标题超链接" 链接地址="">快码编程-网站端完成快码论坛源码专区部分效果</超链接> <行内元素 类名="源码列表内容新内容">NEW</行内元素> </区块> <区块 类名="源码列表内容标题底部"> <超链接 链接地址="">【初级案例】</超链接> <行内元素>/</行内元素> <超链接 链接地址="">快码编程</超链接> </区块> </区块> <区块 类名="源码列表内容时间盒子"> <区块> <行内元素>8</行内元素> <行内元素>眼睛</行内元素> </区块> <区块> <行内元素>2023-03-31 11:48:24</行内元素> <行内元素>时钟</行内元素> </区块> </区块> </列表项> </无序列表> <区块 类名="下一页专区">我是下一页</区块> </区块> <区块 类名="排序盒子"> <区块 类名="个人信息专区"> <行内元素 类名="个人信息标题"> 个人信息 </行内元素> <区块 类名="个人信息内容盒子"> <区块 类名="个人信息内容内部盒子"> <区块 类名="个人信息昵称及会员状态"> <图片框 图像地址="@文件_head.png" 错替文本=""> <区块> <超链接 链接地址="">【快码编程】</超链接> <行内元素> \用户</行内元素> <行内元素>普通用户</行内元素> </区块> </区块> <行内元素 类名="个人信息个性签名">个性签名:寒窗苦读十年一朝凤舞九天</行内元素> </区块> <按钮 类名="个人信息内容观阅记录">观阅记录</按钮> </区块> <区块 类名="个人信息操作盒子"> </区块> </区块> <区块 类名="本月开源达人专区">本月开源达人</区块> <区块 类名="近期最火源码专区">近期最火源码</区块> </区块> </区块> </网页主体> </网页>
CSS样式文件
网页主体 {
背景-颜色: #ededed;
外边距: 0px;
}
.顶部导航盒子 {
高度: 55px;
背景-颜色: #fafafa;
边框-底部: 1px 实线 #ffffff;
盒子-阴影: 5px 5px 5px #e8e8e8;
}
.顶部导航居中盒子{
宽度: 1170px;
高度: 55px;
外边距: 0px 自动;
}
.顶部导航居中盒子 图片框{
宽度: 80px;
高度: 30px;
外边距: 12.5px 0px;
浮动: 左侧;
}
.顶部导航超链接列表{
浮动: 左侧;
列表-样式-类型: 无效;
外边距: 0px 0px 0px 200px;
}
.顶部导航超链接列表 列表项{
显示模式: 内联块元素;
高度: 55px;
}
.顶部导航超链接列表 列表项 超链接{
显示模式: 内联块元素;
高度: 55px;
行高: 55px;
左边距: 30px;
文本颜色: 颜色值-黑色;
文本-装饰: 无效;
}
.顶部导航超链接列表 列表项 超链接:鼠标移入{
文本颜色: #ff516b;
}
.顶部导航搜索区域{
宽度: 265px;
高度: 55px;
浮动: 左侧;
左边距: 50px;
}
.顶部导航搜索区域 数据框{
/*数据框这样有边框轮廓的控件*/
轮廓-样式: 无效;
高度: 37px;
外边距: 6px 0px;
边框: 1px 实线 #ebebeb;
边框-圆角: 5px;
宽度: 195px;
字体-大小: 13px;
}
.顶部导航搜索区域 数据框:获得焦点{
边框: 1px 实线 颜色值-天蓝色;
}
.顶部导航搜索区域 按钮{
宽度: 55px;
高度: 40px;
边框: 1px 实线 #4eda92;
文本颜色: #4eda92;
边框-圆角: 5px;
背景-颜色: 颜色值-白色;
外边距: 6.5px 0px;
}
.顶部导航搜索区域 按钮:鼠标移入{
文本颜色: 颜色值-白色;
背景-颜色: #4eda92;
}
.顶部导航头像区域{
宽度: 120px;
高度: 55px;
浮动: 右侧;
}
.顶部导航头像区域 图片框{
宽度: 43px;
高度: 43px;
边框-圆角: 100%;
边框-样式: 实线;
边框-颜色: #f5f5f5;
外边距: 5px 0px;
}
.顶部导航头像区域 超链接{
显示模式: 内联块元素;
高度: 55px;
行高: 55px;
宽度: 69px;
文本-装饰: 无效;
文本颜色: 颜色值-黑色;
字体-大小: 13px;
左边距: 5px;
溢出: 隐藏;
文本-溢出: 省略号;
空格: 不换行;
}
.顶部导航头像区域 超链接:鼠标移入{
文本颜色: #ff516b;
}
.广告图片区域 {
背景-颜色: 颜色值-粉色;
宽度: 1170px;
高度: 290px;
外边距: 0px 自动;
背景-图像: 地址("@文件_bg.png");
背景-大小: 100% 100%;
}
.广告图片区域 图片框{
宽度: 90px;
高度: 90px;
边框-圆角: 100%;
边框-样式: 实线;
边框-颜色: 颜色值-白色;
边框-宽度: 1px;
外边距: 190px 0px 0px 28px;
}
.二级分类专区 {
高度: 50px;
宽度: 1170px;
背景-颜色: 颜色值-白色;
外边距: 0px 自动;
盒子-阴影: 5px 5px 5px #e8e8e8;
}
.二级分类专区 行内元素{
左边距: 28px;
浮动: 左侧;
高度: 50px;
行高: 50px;
}
.二级分类专区 无序列表{
浮动: 左侧;
列表-样式-类型: 无效;
外边距: 0px;
}
.二级分类专区 无序列表 列表项{
显示模式: 内联块元素;
高度: 50px;
}
.二级分类专区 无序列表 列表项 超链接{
高度: 48px;
显示模式: 内联块元素;
行高: 48px;
文本-装饰: 无效;
文本颜色: 颜色值-黑色;
字体-大小: 13px;
左边距: 33px;
}
.二级分类专区 无序列表 列表项 超链接:鼠标移入{
边框-底部: 2px 实线 #ff516b;
文本颜色: #ff516b;
}
.二级分类专区 无序列表 列表项 .二级分类专区导航选中{
边框-底部: 2px 实线 #ff516b;
文本颜色: #ff516b;
}
.二级分类专区 区块{
宽度: 210px;
高度: 50px;
浮动: 右侧;
右边距: 28px;
}
.二级分类专区 区块 数据框{
宽度: 160px;
高度: 28px;
边框: 1px 实线 #ebebeb;
边框-圆角: 4px;
外边距: 9px 0px;
}
.二级分类专区 区块 数据框:获得焦点{
边框: 1px 实线 颜色值-天蓝色;
轮廓-颜色: #b3ecff;
}
.二级分类专区 区块 按钮{
宽度: 32px;
高度: 32px;
背景-颜色: 颜色值-白色;
边框: 1px 实线 #4eda92;
边框-圆角: 4px;
}
.二级分类专区 区块 按钮:鼠标移入{
背景-颜色: #4eda92;
}
.内容大盒子 {
宽度: 1170px;
外边距: 15px 自动 0px;
溢出: 隐藏;
}
.源码列表盒子 {
宽度: 760px;
背景-颜色: 颜色值-白色;
浮动: 左侧;
}
.源码列表内容盒子{
外边距: 15px 28px;
列表-样式-类型: 无效;
内边距: 0px;
}
.源码列表内容盒子 列表项{
高度: 76px;
边框-底部: 1px 虚线 #B4B4B4;
}
.源码列表内容盒子 列表项:鼠标移入{
背景-颜色: #f0f0f0;
}
.源码列表内容盒子 列表项 图片框{
宽度: 48px;
高度: 48px;
边框: 1px 实线 颜色值-白色;
边框-圆角: 4px;
外边距: 13px 0px 0px 4px;
浮动: 左侧;
}
.源码列表内容标题盒子{
高度: 48px;
外边距: 13px 8px;
浮动: 左侧;
}
.源码列表内容标题超链接{
文本-装饰: 无效;
文本颜色: 颜色值-黑色;
字体-大小: 14px;
}
.源码列表内容新内容{
显示模式: 内联块元素;
宽度: 36px;
高度: 18px;
字体-大小: 13px;
文本颜色: 颜色值-白色;
背景-颜色: #ff516b;
边框-圆角: 3px;
文本-对齐: 居中;
行高: 18px;
}
.源码列表内容标题底部 超链接{
文本-装饰: 无效;
文本颜色: #B4B4B4;
字体-大小: 13px;
}
.源码列表内容标题底部 行内元素{
文本颜色: #B4B4B4;
字体-大小: 13px;
}
.源码列表内容时间盒子{
高度: 48px;
浮动: 右侧;
外边距: 13px 3px;
文本-对齐: 右侧;
}
.源码列表内容时间盒子 行内元素{
文本颜色: #B4B4B4;
字体-大小: 13px;
}
.排序盒子 {
宽度: 390px;
高度: 1120px;
左边距: 20px;
浮动: 右侧;
}
.个人信息专区 {
宽度: 390px;
高度: 300px;
背景-颜色: #f5f5f5;
下边距: 33px;
}
.个人信息标题{
显示模式: 内联块元素;
高度: 40px;
宽度: 100%;
文本颜色: 颜色值-白色;
行高: 40px;
左内边距: 14px;
背景-颜色: #ff516b;
}
.个人信息内容盒子{
高度: 100px;
背景-颜色: 颜色值-白色;
外边距: 15px 13px 0px 13px;
边框-圆角: 4px;
盒子-阴影: 5px 5px 5px #f0f0f0;
}
.个人信息内容内部盒子{
宽度: 232px;
高度: 76px;
浮动: 左侧;
外边距: 12px 12px;
}
.个人信息昵称及会员状态{
高度: 50px;
}
.个人信息昵称及会员状态 图片框{
宽度: 38px;
高度: 38px;
边框-圆角: 100%;
边框: 1px 实线 颜色值-白色;
外边距: 5px 0px;
浮动: 左侧;
}
.个人信息昵称及会员状态 区块{
高度: 40px;
外边距: 5px 0px;
宽度: 192px;
浮动: 左侧;
}
.个人信息昵称及会员状态 超链接{
显示模式: 块级元素;
字体-大小: 13px;
文本-装饰: 无效;
文本颜色: #ff516b;
}
.个人信息昵称及会员状态 超链接:鼠标移入{
文本颜色: 颜色值-黑色;
}
.个人信息昵称及会员状态 行内元素{
字体-大小: 13px;
文本颜色: #888;
}
.个人信息个性签名{
文本颜色: #888;
字体-大小: 13px;
}
.个人信息内容观阅记录{
宽度: 86px;
高度: 38px;
文本颜色: 颜色值-白色;
背景-颜色: #8e6aef;
浮动: 右侧;
上边距: 12px;
右边距: 12px;
边框-样式: 无效;
边框-圆角: 3px;
}
.个人信息操作盒子{
高度: 120px;
背景-颜色: 颜色值-白色;
外边距: 8px 13px 0px 13px;
边框-圆角: 4px;
盒子-阴影: 5px 5px 5px #f0f0f0;
}
.本月开源达人专区 {
宽度: 390px;
高度: 360px;
背景-颜色: 颜色值-桃色;
下边距: 33px;
}
.近期最火源码专区 {
宽度: 390px;
高度: 360px;
背景-颜色: 颜色值-紫色;
下边距: 34px;
}
.下一页专区 {
上边距: 20px;
高度: 60px;
背景-颜色: 颜色值-印度红;
}
赞 
打赏 
生成海报 
发表回复
评论列表（10条）
网站设计简洁美观，源码列表清晰易读，功能完善！
页面布局清晰，内容丰富，但部分区域颜色搭配略显突兀。
页面布局清晰，内容丰富，但部分区域颜色略显突兀。
布局清晰，内容丰富，但加载速度略慢。
页面布局清晰，内容丰富，但部分区域颜色搭配略显突兀。
页面布局清晰，信息呈现流畅，但广告区域略显突兀。
页面布局清晰，内容丰富，但二级分类颜色略显突兀。
布局清晰，内容丰富，但部分功能区颜色略显突兀。
页面布局清晰，内容丰富，但部分功能链接未生效。
页面布局清晰，内容丰富，但部分链接无效，希望改进。
布局清晰，内容丰富，但部分颜色搭配略显突兀。
布局清晰，内容丰富，就是加载略慢。
页面布局清晰，内容丰富，但加载速度略慢。
页面布局清晰，内容丰富，但加载速度略慢。
布局清晰，内容丰富，但部分颜色搭配略显突兀。