ASP.NET Press Release Site

Table of contents

1. Realization

1. Database News Database

(1) Data table NewsInfo

(2) Data table Newsuser

2. Database configuration code

3. css initialization file Normalize.css

4. Common css style base.css

5. Home page

(1) Web Form Default.aspx

(2) css style index.css

6. News details page

(1) WeB form NewsData.apsx

(2) css style data.css

7. News list interface

(1) Web form NewsList.aspx

 (2) css style list.css

8. Release news interface

 (1) Web form AddNews.aspx

(2)AddNews.aspx.cs

(3) SqlHelper class

(4) NewsManager class

(5) css style add.css

9. Login interface

(1) Web form Login.aspx

(2)Login.aspx.cs

 (3) css style users

10. Registration interface

(1) Web Form Register.aspx

(2)Register.aspx.cs

(3) css style users.css

11. Management news interface

(1) Web form Edit.aspx

 (2) css style edit.css

12. Webmaster page

(1) Web form Stationmaster.aspx

(2) css style master.css

Summarize


Development platform: vs2022 and SSMS

1. Realization

1. Database News Database

(1) Data table NewsInfo

CREATE TABLE [dbo].[NewsInfo] (
    [NewsID]       INT             IDENTITY (1, 1) NOT NULL,
    [NewsTitle]    NVARCHAR (500)  NULL,
    [NewsData]     NVARCHAR (1000) NULL,
    [NewsDate]     DATETIME        NULL,
    [NewsImageUrl] NVARCHAR (50)   NULL,
    [NewsCategory] NVARCHAR (20)   NULL,
    PRIMARY KEY CLUSTERED ([NewsID] ASC)
);

(2) Data table Newsuser

CREATE TABLE [dbo].[Newsuser] (
    [UserID]       NVARCHAR (50) NOT NULL,
    [UserPassword] NVARCHAR (50) NULL,
    [UserName]     NVARCHAR (50) NULL,
    PRIMARY KEY CLUSTERED ([UserID] ASC)
);

2. Database configuration code

Put it under Web.config

<connectionStrings>
		<add name="NewsConnectionString"
			 connectionString="Data Source=(LocalDB)\MSSQLLocalDB; AttachDbFilename=|DataDirectory|\NewsDatabase.mdf; Integrated Security=True"
			 providerName="System.Data.SqlClient" />
	</connectionStrings>

3. css initialization file Normalize.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }

4. Common css style base.css

.w { /* 版心的公共类 */
    width: 1190px;
    margin: 0 auto;
}
.fl { /* 左浮动的公共类 */
    float: left;
}
.fr { /* 右浮动的公共类 */
    float: right;
}

/* 清除浮动声明 */
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* 公共样式 begin */
body {
    background-color: #f6f6f6; /* 主体背景色 */
}
a {
    text-decoration: none; /* 取消下划线 */
    font-size: 14px;
    color: #d7ecf3;
}
a:hover {
    color: #093759;
}
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
input, button {
    border: 0;
    outline: none; /* 取消轮廓边框 */
}
ul {
    list-style: none;
}
@font-face { /* 声明字体 */
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?r5tos9');
    src: url('../fonts/icomoon.eot?r5tos9#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?r5tos9') format('truetype'), url('../fonts/icomoon.woff?r5tos9') format('woff'), url('../fonts/icomoon.svg?r5tos9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
/* 公共样式 end */

/* 页面头部分 begin */
.middle {
    background-color: #7c4e8d;
    height: 80px;
    margin-bottom: 100px;
}
.logo {
    box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.3);
    vertical-align: middle;
}
.navbar {
    line-height: 80px;
}
.navbar li {
    float: left;
    width: 250px;
    text-align: center;
    box-sizing: border-box;
}
.nav a span {
    font-family: icomoon;
    letter-spacing: 6px;
    font-size: 20px;
}
/* 页面头部分 end */

/* 页面底部分 begin */
.footer {
    height: 270px;
    background-color: #093759;
    margin-top: 100px;
    border-top: 1px solid #000;
    box-sizing: border-box;
}
.footer-in {
    padding-top: 83px;
}
.footer h1,
.footer p,
.footer a {
    font-size: 12px;
    line-height: 35px;
    padding-right: 10px;
    color: #d7ecf3;
}
.footer h1 {
    font-weight: normal;
    font-size: 20px;
    color: #d7ecf3;
}
.footer a:hover {
    color: #7c4e8d;
}
/* 页面底部分 end */

5. Home page

(1) Web Form Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Myweb.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>天眼Y-焦点事件速递</title>
    <!-- 网站ico -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="css/Normalize.css"/>
    <!-- 公共的css样式 -->
    <link rel="stylesheet" href="css/base.css"/>
    <!-- 首页的css样式 -->
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <!-- 页面头部分 -->
    <div class="header" runat="server">
        <div class="w" runat="server">
            <div class="header-l fl">
                <a href="NewsData.aspx?newsid=31"><asp:Image ID="Headlines" runat="server" ImageUrl="~/images/Headlines_02.png" Height="450px"/></a>              
            </div>
            <div class="header-r fr">
                <a href="NewsData.aspx?newsid=31"><h1>今日头条</h1></a>
                <a href="NewsData.aspx?newsid=31"><p>五档!动物系人人果实尼卡形态!</p></a>
            </div>
        </div>
    </div>
    <!-- 中间头部分 -->
    <div class="middle" runat="server">
        <div class="nav clearfix w"  runat="server">
            <!-- logo部分 -->
            <div class="logo fl">
                <a href="Default.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo_03.png" />
                </a>
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar fl">
                <ul>
                    <li>
                        <asp:HyperLink ID="Home" runat="server" NavigateUrl="~/Default.aspx"><span>首页</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="News" runat="server" NavigateUrl="~/Manager/AddNews.aspx"><span>发布新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Manager" runat="server" NavigateUrl="~/Manager/Login.aspx"><span>管理新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Personal" runat="server" NavigateUrl="~/Stationmaster.aspx"><span>关于站长</span></asp:HyperLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 中间主体部分 -->
    <div class="w major clearfix" runat="server">
        <div class="top clearfix">
            <div class="d fl">
                <asp:Label ID="Label1" runat="server" Text="时事新闻"></asp:Label>
                <div class="limit">
                    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                        <ItemTemplate>
                            <div class="news_main clearfix">
                                <a href="NewsData.aspx?newsid=<%# Eval("NewsID") %>"><%# Eval("NewsTitle") %></a>
                                <asp:Label ID="NewsDateLabel1" runat="server" Text='<%# Eval("NewsDate") %>' />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString %>" SelectCommand="SELECT [NewsID], [NewsTitle], [NewsDate] FROM [NewsInfo] WHERE NewsCategory='时事新闻'"></asp:SqlDataSource>
                </div>
                <asp:HyperLink ID="HyperLink1" CssClass="more" runat="server" NavigateUrl="~/NewsList.aspx?category=时事新闻">浏览更多<i>焦点新闻>>></i></asp:HyperLink>
            </div>
            <div class="d fr">
                <asp:Label ID="Label2" runat="server" Text="娱乐新闻"></asp:Label>
                <div class="limit">
                    <asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource2">
                        <ItemTemplate>
                            <div class="news_main clearfix">
                                <a href="NewsData.aspx?newsid=<%# Eval("NewsID") %>"><%# Eval("NewsTitle") %></a>
                                <asp:Label ID="NewsDateLabel1" runat="server" Text='<%# Eval("NewsDate") %>' />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString %>" SelectCommand="SELECT [NewsID], [NewsTitle], [NewsDate] FROM [NewsInfo] WHERE NewsCategory='娱乐新闻' AND [NewsID] != 31"></asp:SqlDataSource>
                </div>
                <asp:HyperLink ID="HyperLink2" CssClass="more" runat="server" NavigateUrl="~/NewsList.aspx?category=娱乐新闻">浏览更多<i>焦点新闻>>></i></asp:HyperLink>
            </div>
        </div>
        <div class="bottom clearfix">
            <div class="d fl">
                <asp:Label ID="Label3" runat="server" Text="财经新闻"></asp:Label>
                <div class="limit">
                    <asp:Repeater ID="Repeater3" runat="server" DataSourceID="SqlDataSource3">
                        <ItemTemplate>
                            <div class="news_main clearfix">
                                <a href="NewsData.aspx?newsid=<%# Eval("NewsID") %>"><%# Eval("NewsTitle") %></a>
                                <asp:Label ID="NewsDateLabel1" runat="server" Text='<%# Eval("NewsDate") %>' />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString %>" SelectCommand="SELECT [NewsID], [NewsTitle], [NewsDate] FROM [NewsInfo] WHERE NewsCategory='财经新闻'"></asp:SqlDataSource>
                <asp:HyperLink ID="HyperLink3" CssClass="more" runat="server" NavigateUrl="~/NewsList.aspx?category=财经新闻">浏览更多<i>焦点新闻>>></i></asp:HyperLink>
            </div>
            <div class="d fr">
                <asp:Label ID="Label4" runat="server" Text="体育新闻"></asp:Label>
                <div class="limit">
                    <asp:Repeater ID="Repeater4" runat="server" DataSourceID="SqlDataSource4">
                        <ItemTemplate>
                            <div class="news_main clearfix">
                                <a href="NewsData.aspx?newsid=<%# Eval("NewsID") %>"><%# Eval("NewsTitle") %></a>
                                <asp:Label ID="NewsDateLabel1" runat="server" Text='<%# Eval("NewsDate") %>' />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString %>" SelectCommand="SELECT [NewsID], [NewsTitle], [NewsDate] FROM [NewsInfo] WHERE NewsCategory='体育新闻'"></asp:SqlDataSource>
                <asp:HyperLink ID="HyperLink4" CssClass="more" runat="server" NavigateUrl="~/NewsList.aspx?category=体育新闻">浏览更多<i>焦点新闻>>></i></asp:HyperLink>
            </div>
        </div>
    </div>
    <!-- 页面底部分 -->
    <div class="footer" runat="server">
        <div class="footer-in w">
            <h1>其他网站</h1>
            <p class="othernet">
                <a href="https://cn.bing.com/?scope=web&FORM=ANNTH1">必应</a>
                <a href="https://www.baidu.com/?tn=02003390_30_hao_pghttps://www.baidu.com/?tn=02003390_30_hao_pg">百度</a>
                <a href="https://vip.iqiyi.com/cps_pc.html">爱奇艺</a>
                <a href="https://www.mgtv.com/">芒果TV</a>
                <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=05946b19-7c4f-4443-b244-f1e37a23abbc&union_place=un">苏宁易购</a>
                <a href="https://www.msn.cn/zh-cn/lifestyle/shopping?ocid=msedgntp&cvid=2106713fc5ba43e29da7323af979881d">精选购物</a>
                <a href="https://tv.cctv.com/">CCTV</a>
                <a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1183900030_1813100136_110592400466:1652539528_078_1000156018&union_lens=lensId:OPT@1605248376@0bba6580_e459_175c0425fa9_4681@01;eventPageId:1586925572118;recoveryid:1652539528_078_1000156018&bxsign=tbkD7h3X8wzgVRh1OTmdJZONQCOsFcXMK1ccdlt6zI5/OzI77FFr0azst/1Dh91W9umglfxBkG+fu+pJknlCvwB8gGczvtxhl1LCeN9MnxGBpg=">天猫</a>
                <a href="https://www.taobao.com/">淘宝</a>
                <a href="https://www.jd.com/?cu=true&utm_source=c.mktdatatech.com&utm_medium=tuiguang&utm_campaign=t_16282_172613369&utm_term=b44015abbfe64f178dd3285a545224b2">京东</a>
                <a href="https://ms.vipstatic.com/union/deeplink/deeplink.html?link_url=vipshop%3A%2F%2FgoHome%3Ftra_from%3Dtra%3AC01V0000kve7p4us%3A%40_%401652539633245%3Amig_code%3A224842_168_0_QW5haGVpbVJNLXdlaXBpbmh1aQ%3D%3D_1%3A23939a8d04024296b4735f9ae37b39b9&dest_url=http%3A%2F%2Fwww.vip.com%2F">唯品会</a>
                <a href="https://www.xiaomiyoupin.com/">小米有品</a>
                <a href="https://hd.oppo.com/act/m/2021/CPS/index.html?title=title&utm_source=duomai&utm_medium=191943086">欢太商城</a>
                <a href="http://www.people.com.cn/">人民网</a>
                <a href="http://www.xinhuanet.com/">新华网</a>
            </p>
            <p>@ 2022年YJY Inc.保留所有权利。-19物联网工程有限公司</p>
        </div>
    </div>
</body>
</html>

(2) css style index.css

.header {
    height: 454px;
    background-color: #093759;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
}
.header-l {
    width: 694px;
    box-shadow: 10px -10px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}
.header-l:hover {
    margin-top: -5px;
    box-shadow: 0 10px 5px 5px rgba(0, 0, 0, 0.2);

}
.header-r {
    margin-top: 173px;
}
.header-r h1 {
    border-bottom: 1px solid #d7ecf3;
    padding-bottom: 20px;
    text-align: center;
    color: #d7ecf3;
}
.header-r p {
    font-size: 26px;
    text-align: center;
    padding-top: 20px;
    color: #d7ecf3;
}
/* 首页头部分 end */

/* 中间主体部分 begin */
.major .d {
    width: 570px;
}
.major .d:nth-child(1) {
    padding-bottom: 80px;
}
.major .d:nth-child(2) {
    padding-bottom: 80px;
}
.major .d span:first-child {
    display: block;
    line-height: 50px;
    background-color: #7c4e8d;
    text-align: center;
    color: #d7ecf3;
    font-weight: 700;
    margin-bottom: 20px;
}
.limit {
    height: 290px;
    overflow: hidden;
}
.news_main {
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}
ItemTemplate {
    width: 300px;
}
.major .d .news_main a,
.major .d .news_main span {
    display: block;
    font-size: 12px;
    height: 40px;
    line-height: 40px;
    color: #050505;
}
.major .d .news_main a {
    float: left;
    width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
}
.major .d .news_main span {
    float: right;
}
.more {
    width: 570px;
    display: block;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    color: #676767;
    background-color: #e3e2e2;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 20px;
}
.more:hover {
    background-color: #dad8d8;
    border-radius: 4px;
}
.more i {
    color: #7ea1a6;
    font-style: normal;
}
/* 中间主体部分 end */

6. News details page

(1) WeB form NewsData.apsx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewsData.aspx.cs" Inherits="Myweb.NewsData" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>天眼Y-焦点事件速递</title>
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="css/Normalize.css"/>
    <!-- 公共的css样式 -->
    <link rel="stylesheet" href="css/base.css"/>
    <!-- 新闻详情的css样式 -->
    <link rel="stylesheet" href="css/data.css"/>
</head>
<body>
    <!-- 页面头部分 -->
    <div class="middle" runat="server">
        <div class="nav clearfix w"  runat="server">
            <!-- logo部分 -->
            <div class="logo fl">
                <a href="Default.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo_03.png" />
                </a>
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar fl">
                <ul>
                    <li>
                        <asp:HyperLink ID="Home" runat="server" NavigateUrl="~/Default.aspx"><span>首页</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="News" runat="server" NavigateUrl="~/Manager/AddNews.aspx"><span>发布新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Manager" runat="server" NavigateUrl="~/Manager/Login.aspx"><span>管理新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Personal" runat="server" NavigateUrl="~/Stationmaster.aspx"><span>关于站长</span></asp:HyperLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 中间主体部分 -->
    <div class="w clearfix" runat="server">
        <div class="news_data">
            <asp:DataList ID="DataList1" runat="server" DataKeyField="NewsID" DataSourceID="SqlDataSource1" Width="600px">
                <ItemTemplate>
                    <b><%# Eval("NewsTitle") %></b>
                    <div class="mnav clearfix">
                        <p class="fl">类别:<%# Eval("NewsCategory") %></p>
                        <p class="fr">发布时间:<%# Eval("NewsDate") %></p>
                    </div>
                    <asp:Label ID="NewsDataLabel2" runat="server" Text='<%# Eval("NewsData") %>' />
                    <br />
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("NewsImageUrl") %>' Width="900px" />
                    <br /><br /><br />
                </ItemTemplate>
            </asp:DataList>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString %>" SelectCommand="SELECT * FROM [NewsInfo] WHERE ([NewsID] = @NewsID)">
                <SelectParameters>
                    <asp:QueryStringParameter Name="NewsID" QueryStringField="newsid" Type="Int32" />
                </SelectParameters>
            </asp:SqlDataSource>
        </div>
    </div>
    <!-- 页面底部分 -->
    <div class="footer" runat="server">
        <div class="footer-in w">
            <h1>其他网站</h1>
            <p class="othernet">
                <a href="https://cn.bing.com/?scope=web&FORM=ANNTH1">必应</a>
                <a href="https://www.baidu.com/?tn=02003390_30_hao_pghttps://www.baidu.com/?tn=02003390_30_hao_pg">百度</a>
                <a href="https://vip.iqiyi.com/cps_pc.html">爱奇艺</a>
                <a href="https://www.mgtv.com/">芒果TV</a>
                <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=05946b19-7c4f-4443-b244-f1e37a23abbc&union_place=un">苏宁易购</a>
                <a href="https://www.msn.cn/zh-cn/lifestyle/shopping?ocid=msedgntp&cvid=2106713fc5ba43e29da7323af979881d">精选购物</a>
                <a href="https://tv.cctv.com/">CCTV</a>
                <a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1183900030_1813100136_110592400466:1652539528_078_1000156018&union_lens=lensId:OPT@1605248376@0bba6580_e459_175c0425fa9_4681@01;eventPageId:1586925572118;recoveryid:1652539528_078_1000156018&bxsign=tbkD7h3X8wzgVRh1OTmdJZONQCOsFcXMK1ccdlt6zI5/OzI77FFr0azst/1Dh91W9umglfxBkG+fu+pJknlCvwB8gGczvtxhl1LCeN9MnxGBpg=">天猫</a>
                <a href="https://www.taobao.com/">淘宝</a>
                <a href="https://www.jd.com/?cu=true&utm_source=c.mktdatatech.com&utm_medium=tuiguang&utm_campaign=t_16282_172613369&utm_term=b44015abbfe64f178dd3285a545224b2">京东</a>
                <a href="https://ms.vipstatic.com/union/deeplink/deeplink.html?link_url=vipshop%3A%2F%2FgoHome%3Ftra_from%3Dtra%3AC01V0000kve7p4us%3A%40_%401652539633245%3Amig_code%3A224842_168_0_QW5haGVpbVJNLXdlaXBpbmh1aQ%3D%3D_1%3A23939a8d04024296b4735f9ae37b39b9&dest_url=http%3A%2F%2Fwww.vip.com%2F">唯品会</a>
                <a href="https://www.xiaomiyoupin.com/">小米有品</a>
                <a href="https://hd.oppo.com/act/m/2021/CPS/index.html?title=title&utm_source=duomai&utm_medium=191943086">欢太商城</a>
                <a href="http://www.people.com.cn/">人民网</a>
                <a href="http://www.xinhuanet.com/">新华网</a>
            </p>
            <p>@ 2022年YJY Inc.保留所有权利。-19物联网工程有限公司</p>
        </div>
    </div>
</body>
</html>

(2) css style data.css

.news_data {
    margin: 0 auto;
    width: 900px;
}
.news_data b {
    display: block;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 24px;
    color: #7c4e8d;
}
.news_data .mnav {
    height: 60px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.news_data .mnav p {
    display: block;
    line-height: 60px;
    color: #4e4e4e;
    padding: 0 10px;
}
.news_data span {
    display: block;
    color: #4e4e4e;
    letter-spacing: 1px;
    text-indent: 2em;
    line-height: 150%;
}

7. News list interface

(1) Web form NewsList.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewsList.aspx.cs" Inherits="Myweb.NewsList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>天眼Y-焦点事件速递</title>
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="css/Normalize.css"/>
    <!-- 公共的css样式 -->
    <link rel="stylesheet" href="css/base.css"/>
    <!-- 新闻列表的css样式 -->
    <link rel="stylesheet" href="css/list.css" />
</head>
<body>
    <!-- 页面头部分 -->
    <div class="middle" runat="server">
        <div class="nav clearfix w"  runat="server">
            <!-- logo部分 -->
            <div class="logo fl">
                <a href="Default.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo_03.png" />
                </a>
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar fl">
                <ul>
                    <li>
                        <asp:HyperLink ID="Home" runat="server" NavigateUrl="~/Default.aspx"><span>首页</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="News" runat="server" NavigateUrl="~/Manager/AddNews.aspx"><span>发布新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Manager" runat="server" NavigateUrl="~/Manager/Login.aspx"><span>管理新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Personal" runat="server" NavigateUrl="~/Stationmaster.aspx"><span>关于站长</span></asp:HyperLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 中间主体部分 -->
    <div class="w clearfix"  runat="server">
        <div class="news_list">
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                <HeaderTemplate><b>新闻标题</b><b>发布时间</b><br /></HeaderTemplate>
                <ItemTemplate>
                    <div class="listdata">
                        <a href="NewsData.aspx?newsid=<%# Eval("NewsID") %>"><%# Eval("NewsTitle") %></a>
                        <asp:Label ID="NewsDateLabel" runat="server" Text='<%# Eval("NewsDate") %>' />
                    </div>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">返回首页</asp:HyperLink>
                </FooterTemplate>
            </asp:Repeater>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString %>" SelectCommand="SELECT [NewsID], [NewsTitle], [NewsDate] FROM [NewsInfo] WHERE ([NewsCategory] = @NewsCategory)">
                <SelectParameters>
                    <asp:QueryStringParameter Name="NewsCategory" QueryStringField="category" Type="String" />
                </SelectParameters>
            </asp:SqlDataSource>
        </div>
    </div>
    <!-- 页面底部分 -->
    <div class="footer" runat="server">
        <div class="footer-in w">
            <h1>其他网站</h1>
            <p class="othernet">
                <a href="https://cn.bing.com/?scope=web&FORM=ANNTH1">必应</a>
                <a href="https://www.baidu.com/?tn=02003390_30_hao_pghttps://www.baidu.com/?tn=02003390_30_hao_pg">百度</a>
                <a href="https://vip.iqiyi.com/cps_pc.html">爱奇艺</a>
                <a href="https://www.mgtv.com/">芒果TV</a>
                <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=05946b19-7c4f-4443-b244-f1e37a23abbc&union_place=un">苏宁易购</a>
                <a href="https://www.msn.cn/zh-cn/lifestyle/shopping?ocid=msedgntp&cvid=2106713fc5ba43e29da7323af979881d">精选购物</a>
                <a href="https://tv.cctv.com/">CCTV</a>
                <a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1183900030_1813100136_110592400466:1652539528_078_1000156018&union_lens=lensId:OPT@1605248376@0bba6580_e459_175c0425fa9_4681@01;eventPageId:1586925572118;recoveryid:1652539528_078_1000156018&bxsign=tbkD7h3X8wzgVRh1OTmdJZONQCOsFcXMK1ccdlt6zI5/OzI77FFr0azst/1Dh91W9umglfxBkG+fu+pJknlCvwB8gGczvtxhl1LCeN9MnxGBpg=">天猫</a>
                <a href="https://www.taobao.com/">淘宝</a>
                <a href="https://www.jd.com/?cu=true&utm_source=c.mktdatatech.com&utm_medium=tuiguang&utm_campaign=t_16282_172613369&utm_term=b44015abbfe64f178dd3285a545224b2">京东</a>
                <a href="https://ms.vipstatic.com/union/deeplink/deeplink.html?link_url=vipshop%3A%2F%2FgoHome%3Ftra_from%3Dtra%3AC01V0000kve7p4us%3A%40_%401652539633245%3Amig_code%3A224842_168_0_QW5haGVpbVJNLXdlaXBpbmh1aQ%3D%3D_1%3A23939a8d04024296b4735f9ae37b39b9&dest_url=http%3A%2F%2Fwww.vip.com%2F">唯品会</a>
                <a href="https://www.xiaomiyoupin.com/">小米有品</a>
                <a href="https://hd.oppo.com/act/m/2021/CPS/index.html?title=title&utm_source=duomai&utm_medium=191943086">欢太商城</a>
                <a href="http://www.people.com.cn/">人民网</a>
                <a href="http://www.xinhuanet.com/">新华网</a>
            </p>
            <p>@ 2022年YJY Inc.保留所有权利。-19物联网工程有限公司</p>
        </div>
    </div>
</body>
</html>

 (2) css style list.css

.news_list {
    margin:0 auto;
    width: 900px;
}
.news_list b,
.news_list span,
.news_list a {
    float: left;
    display: block;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
}
.news_list b {
    background-color: #7c4e8d;
    color: #d7ecf3;
}
.news_list b:first-child {
    width: 700px;
}
.news_list b:nth-child(2) {
    width: 200px;
}
.listdata {
    float: left;
}
.listdata:hover {
    background-color: #eee;
}
.news_list a {
    width: 700px;
    color: #050505;
    text-align: left;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news_list span {
    width: 200px;
}
#Repeater1_HyperLink1 {
    width: 900px;
    background-color: #7c4e8d;
    text-align: center;
    color: #d7ecf3;
    font-weight: 700;
}
#Repeater1_HyperLink1:hover {
    color: #093759;
}

8. Release news interface

 (1) Web form AddNews.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddNews.aspx.cs" Inherits="Myweb.Manager.AddNews" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>天眼Y-焦点事件速递</title>
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="../css/Normalize.css"/>
    <!-- 公共的css样式 -->
    <link rel="stylesheet" href="../css/base.css"/>
    <!-- 发布界面的css样式 -->
    <link rel="stylesheet" href="../css/add.css" />
</head>
<body>
    <!-- 页面头部分 -->
    <div class="middle" runat="server">
        <div class="nav clearfix w"  runat="server">
            <!-- logo部分 -->
            <div class="logo fl">
                <a href="../Default.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo_03.png" />
                </a>
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar fl">
                <ul>
                    <li>
                        <asp:HyperLink ID="Home" runat="server" NavigateUrl="~/Default.aspx"><span>首页</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="News" runat="server" NavigateUrl="~/Manager/AddNews.aspx"><span>发布新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Manager" runat="server" NavigateUrl="~/Manager/Login.aspx"><span>管理新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Personal" runat="server" NavigateUrl="~/Stationmaster.aspx"><span>关于站长</span></asp:HyperLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 中间主体部分 -->
    <div class="w add" runat="server">
        <div class="add-in" runat="server">
            <form id="form1" runat="server">
                <div class="title">
                    <asp:TextBox ID="txttitle" runat="server" placeholder="请输入新闻标题(不能为空)"></asp:TextBox>
                </div>
                <div class="content">
                    <asp:TextBox ID="txtcontent" runat="server" TextMode="MultiLine" placeholder="请输入新闻内容(不能为空)"></asp:TextBox>
                </div>
                <div class="mageurl">
                    <asp:Label ID="Label1" runat="server" Text="图片路径:"></asp:Label>
                    <asp:TextBox ID="txtimageurl" runat="server">../images/</asp:TextBox>
                </div>
                <div class="category">
                    <asp:Label ID="Label2" runat="server" Text="新闻类别:"></asp:Label>
                        <asp:DropDownList ID="ddlcategory" runat="server">
                            <asp:ListItem>时事新闻</asp:ListItem>
                            <asp:ListItem>财经新闻</asp:ListItem>
                            <asp:ListItem>娱乐新闻</asp:ListItem>
                            <asp:ListItem>体育新闻</asp:ListItem>
                        </asp:DropDownList>
                </div>
                <div class="button clearfix">
                    <asp:Button ID="Button1" runat="server" Text="发布" OnClick="Button1_Click" />
                    <input type="reset"/>
                </div>
            </form>
        </div>
    </div> 
    <!-- 页面底部分 -->
    <div class="footer" runat="server">
        <div class="footer-in w">
            <h1>其他网站</h1>
            <p class="othernet">
                <a href="https://cn.bing.com/?scope=web&FORM=ANNTH1">必应</a>
                <a href="https://www.baidu.com/?tn=02003390_30_hao_pghttps://www.baidu.com/?tn=02003390_30_hao_pg">百度</a>
                <a href="https://vip.iqiyi.com/cps_pc.html">爱奇艺</a>
                <a href="https://www.mgtv.com/">芒果TV</a>
                <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=05946b19-7c4f-4443-b244-f1e37a23abbc&union_place=un">苏宁易购</a>
                <a href="https://www.msn.cn/zh-cn/lifestyle/shopping?ocid=msedgntp&cvid=2106713fc5ba43e29da7323af979881d">精选购物</a>
                <a href="https://tv.cctv.com/">CCTV</a>
                <a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1183900030_1813100136_110592400466:1652539528_078_1000156018&union_lens=lensId:OPT@1605248376@0bba6580_e459_175c0425fa9_4681@01;eventPageId:1586925572118;recoveryid:1652539528_078_1000156018&bxsign=tbkD7h3X8wzgVRh1OTmdJZONQCOsFcXMK1ccdlt6zI5/OzI77FFr0azst/1Dh91W9umglfxBkG+fu+pJknlCvwB8gGczvtxhl1LCeN9MnxGBpg=">天猫</a>
                <a href="https://www.taobao.com/">淘宝</a>
                <a href="https://www.jd.com/?cu=true&utm_source=c.mktdatatech.com&utm_medium=tuiguang&utm_campaign=t_16282_172613369&utm_term=b44015abbfe64f178dd3285a545224b2">京东</a>
                <a href="https://ms.vipstatic.com/union/deeplink/deeplink.html?link_url=vipshop%3A%2F%2FgoHome%3Ftra_from%3Dtra%3AC01V0000kve7p4us%3A%40_%401652539633245%3Amig_code%3A224842_168_0_QW5haGVpbVJNLXdlaXBpbmh1aQ%3D%3D_1%3A23939a8d04024296b4735f9ae37b39b9&dest_url=http%3A%2F%2Fwww.vip.com%2F">唯品会</a>
                <a href="https://www.xiaomiyoupin.com/">小米有品</a>
                <a href="https://hd.oppo.com/act/m/2021/CPS/index.html?title=title&utm_source=duomai&utm_medium=191943086">欢太商城</a>
                <a href="http://www.people.com.cn/">人民网</a>
                <a href="http://www.xinhuanet.com/">新华网</a>
            </p>
            <p>@ 2022年YJY Inc.保留所有权利。-19物联网工程有限公司</p>
        </div>
    </div>
</body>
</html>

(2)AddNews.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Myweb.NewsAppCode;

namespace Myweb.Manager
{
    public partial class AddNews : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            //初始化新闻操作类
            NewsManager mynews = new NewsManager();
            //调用添加新闻的方法
            bool result = mynews.AddNews(txttitle.Text, txtcontent.Text, ddlcategory.SelectedValue, txtimageurl.Text);
            //判断添加操作的执行结果
            if (result)
                //成功后返回首页
                Response.Redirect("~/Default.aspx");
        }
    }
}

(3) SqlHelper class

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

namespace Myweb.NewsAppCode
{
    public class SqlHelper
    {
        //获取数据库连接字符串,其属于静态变量且只读,项目中所有文档可以直接使用,但不能修改
        public static readonly string ConnectionStringLocalTransaction = ConfigurationManager.ConnectionStrings["NewsConnectionString"].ConnectionString;
        //public static readonly string ConnectionStringInventoryDistributedTransaction = ConfigurationManager.ConnectionStrings["SQLConnString2"].ConnectionString;
        //public static readonly string ConnectionStringOrderDistributedTransaction = ConfigurationManager.ConnectionStrings["SQLConnString3"].ConnectionString;
        //public static readonly string ConnectionStringProfile = ConfigurationManager.ConnectionStrings["SQLProfileConnString"].ConnectionString;

        // 哈希表用来存储缓存的参数信息,哈希表可以存储任意类型的参数。
        private static Hashtable parmCache = Hashtable.Synchronized(new Hashtable());

        /// <summary>
        ///执行一个不需要返回值的SqlCommand命令,通过指定专用的连接字符串。
        /// 使用参数数组形式提供参数列表 
        /// </summary>
        /// <remarks>
        /// 使用示例:
        ///  int result = ExecuteNonQuery(connString, CommandType.StoredProcedure, "PublishOrders", new SqlParameter("@prodid", 24));
        /// </remarks>
        /// <param name="connectionString">一个有效的数据库连接字符串</param>
        /// <param name="commandType">SqlCommand命令类型 (存储过程, T-SQL语句, 等等。)</param>
        /// <param name="commandText">存储过程的名字或者 T-SQL 语句</param>
        /// <param name="commandParameters">以数组形式提供SqlCommand命令中用到的参数列表</param>
        /// <returns>返回一个数值表示此SqlCommand命令执行后影响的行数</returns>
        public static int ExecuteNonQuery(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {

            SqlCommand cmd = new SqlCommand();

            using (SqlConnection conn = new SqlConnection(connectionString))
            {
                //通过PrePareCommand方法将参数逐个加入到SqlCommand的参数集合中
                PrepareCommand(cmd, conn, null, cmdType, cmdText, commandParameters);
                int val = cmd.ExecuteNonQuery();

                //清空SqlCommand中的参数列表
                cmd.Parameters.Clear();
                return val;
            }
        }

        /// <summary>
        ///执行一条不返回结果的SqlCommand,通过一个已经存在的数据库连接 
        /// 使用参数数组提供参数
        /// </summary>
        /// <remarks>
        /// 使用示例:  
        ///  int result = ExecuteNonQuery(conn, CommandType.StoredProcedure, "PublishOrders", new SqlParameter("@prodid", 24));
        /// </remarks>
        /// <param name="conn">一个现有的数据库连接</param>
        /// <param name="commandType">SqlCommand命令类型 (存储过程, T-SQL语句, 等等。)</param>
        /// <param name="commandText">存储过程的名字或者 T-SQL 语句</param>
        /// <param name="commandParameters">以数组形式提供SqlCommand命令中用到的参数列表</param>
        /// <returns>返回一个数值表示此SqlCommand命令执行后影响的行数</returns>
        public static int ExecuteNonQuery(SqlConnection connection, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {

            SqlCommand cmd = new SqlCommand();

            PrepareCommand(cmd, connection, null, cmdType, cmdText, commandParameters);
            int val = cmd.ExecuteNonQuery();
            cmd.Parameters.Clear();
            return val;
        }

        /// <summary>
        /// 执行一条不返回结果的SqlCommand,通过一个已经存在的数据库事物处理 
        /// 使用参数数组提供参数
        /// </summary>
        /// <remarks>
        /// 使用示例: 
        ///  int result = ExecuteNonQuery(trans, CommandType.StoredProcedure, "PublishOrders", new SqlParameter("@prodid", 24));
        /// </remarks>
        /// <param name="trans">一个存在的 sql 事物处理</param>
        /// <param name="commandType">SqlCommand命令类型 (存储过程, T-SQL语句, 等等。)</param>
        /// <param name="commandText">存储过程的名字或者 T-SQL 语句</param>
        /// <param name="commandParameters">以数组形式提供SqlCommand命令中用到的参数列表</param>
        /// <returns>返回一个数值表示此SqlCommand命令执行后影响的行数</returns>
        public static int ExecuteNonQuery(SqlTransaction trans, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            SqlCommand cmd = new SqlCommand();
            PrepareCommand(cmd, trans.Connection, trans, cmdType, cmdText, commandParameters);
            int val = cmd.ExecuteNonQuery();
            cmd.Parameters.Clear();
            return val;
        }

        /// <summary>
        /// 执行一条返回结果集的SqlCommand命令,通过专用的连接字符串。
        /// 使用参数数组提供参数
        /// </summary>
        /// <remarks>
        /// 使用示例:  
        ///  SqlDataReader r = ExecuteReader(connString, CommandType.StoredProcedure, "PublishOrders", new SqlParameter("@prodid", 24));
        /// </remarks>
        /// <param name="connectionString">一个有效的数据库连接字符串</param>
        /// <param name="commandType">SqlCommand命令类型 (存储过程, T-SQL语句, 等等。)</param>
        /// <param name="commandText">存储过程的名字或者 T-SQL 语句</param>
        /// <param name="commandParameters">以数组形式提供SqlCommand命令中用到的参数列表</param>
        /// <returns>返回一个包含结果的SqlDataReader</returns>
        public static SqlDataReader ExecuteReader(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            SqlCommand cmd = new SqlCommand();
            SqlConnection conn = new SqlConnection(connectionString);

            // 在这里使用try/catch处理是因为如果方法出现异常,则SqlDataReader就不存在,
            //CommandBehavior.CloseConnection的语句就不会执行,触发的异常由catch捕获。
            //关闭数据库连接,并通过throw再次引发捕捉到的异常。
            try
            {
                PrepareCommand(cmd, conn, null, cmdType, cmdText, commandParameters);
                SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                cmd.Parameters.Clear();
                return rdr;
            }
            catch
            {
                conn.Close();
                throw;
            }
        }

        /// <summary>
        /// 执行一条返回第一条记录第一列的SqlCommand命令,通过专用的连接字符串。 
        /// 使用参数数组提供参数
        /// </summary>
        /// <remarks>
        /// 使用示例:  
        ///  Object obj = ExecuteScalar(connString, CommandType.StoredProcedure, "PublishOrders", new SqlParameter("@prodid", 24));
        /// </remarks>
        /// <param name="connectionString">一个有效的数据库连接字符串</param>
        /// <param name="commandType">SqlCommand命令类型 (存储过程, T-SQL语句, 等等。)</param>
        /// <param name="commandText">存储过程的名字或者 T-SQL 语句</param>
        /// <param name="commandParameters">以数组形式提供SqlCommand命令中用到的参数列表</param>
        /// <returns>返回一个object类型的数据,可以通过 Convert.To{Type}方法转换类型</returns>
        public static object ExecuteScalar(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            SqlCommand cmd = new SqlCommand();

            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                PrepareCommand(cmd, connection, null, cmdType, cmdText, commandParameters);
                object val = cmd.ExecuteScalar();
                cmd.Parameters.Clear();
                return val;
            }
        }

        /// <summary>
        /// 执行一条返回第一条记录第一列的SqlCommand命令,通过已经存在的数据库连接。
        /// 使用参数数组提供参数
        /// </summary>
        /// <remarks>
        /// 使用示例: 
        ///  Object obj = ExecuteScalar(connString, CommandType.StoredProcedure, "PublishOrders", new SqlParameter("@prodid", 24));
        /// </remarks>
        /// <param name="conn">一个已经存在的数据库连接</param>
        /// <param name="commandType">SqlCommand命令类型 (存储过程, T-SQL语句, 等等。)</param>
        /// <param name="commandText">存储过程的名字或者 T-SQL 语句</param>
        /// <param name="commandParameters">以数组形式提供SqlCommand命令中用到的参数列表</param>
        /// <returns>返回一个object类型的数据,可以通过 Convert.To{Type}方法转换类型</returns>
        public static object ExecuteScalar(SqlConnection connection, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {

            SqlCommand cmd = new SqlCommand();

            PrepareCommand(cmd, connection, null, cmdType, cmdText, commandParameters);
            object val = cmd.ExecuteScalar();
            cmd.Parameters.Clear();
            return val;
        }
        /// <summary>
        /// 缓存参数数组
        /// </summary>
        /// <param name="cacheKey">参数缓存的键值</param>
        /// <param name="cmdParms">被缓存的参数列表</param>
        public static void CacheParameters(string cacheKey, params SqlParameter[] commandParameters)
        {
            parmCache[cacheKey] = commandParameters;
        }

        /// <summary>
        /// 获取被缓存的参数
        /// </summary>
        /// <param name="cacheKey">用于查找参数的KEY值</param>
        /// <returns>返回缓存的参数数组</returns>
        public static SqlParameter[] GetCachedParameters(string cacheKey)
        {
            SqlParameter[] cachedParms = (SqlParameter[])parmCache[cacheKey];

            if (cachedParms == null)
                return null;

            //新建一个参数的克隆列表
            SqlParameter[] clonedParms = new SqlParameter[cachedParms.Length];

            //通过循环为克隆参数列表赋值
            for (int i = 0, j = cachedParms.Length; i < j; i++)
                //使用clone方法复制参数列表中的参数
                clonedParms[i] = (SqlParameter)((ICloneable)cachedParms[i]).Clone();

            return clonedParms;
        }

        /// <summary>
        /// 为执行命令准备参数
        /// </summary>
        /// <param name="cmd">SqlCommand 命令</param>
        /// <param name="conn">已经存在的数据库连接</param>
        /// <param name="trans">数据库事物处理</param>
        /// <param name="cmdType">SqlCommand命令类型 (存储过程, T-SQL语句, 等等。)</param>
        /// <param name="cmdText">Command text,T-SQL语句 例如 Select * from Products</param>
        /// <param name="cmdParms">返回带参数的命令</param>
        private static void PrepareCommand(SqlCommand cmd, SqlConnection conn, SqlTransaction trans, CommandType cmdType, string cmdText, SqlParameter[] cmdParms)
        {

            //判断数据库连接状态
            if (conn.State != ConnectionState.Open)
                conn.Open();

            cmd.Connection = conn;
            cmd.CommandText = cmdText;

            //判断是否需要事物处理
            if (trans != null)
                cmd.Transaction = trans;

            cmd.CommandType = cmdType;

            if (cmdParms != null)
            {
                foreach (SqlParameter parm in cmdParms)
                    cmd.Parameters.Add(parm);
            }
        }
    }
}

(4) NewsManager class

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;

namespace Myweb.NewsAppCode
{
    public class NewsManager
    {
        //定义常量表示字段名称或SQL语句
        private const string SQL_INSERT_NEWSINFO = "INSERT INTO newsinfo VALUES(@title,@data,@date,@imageurl,@category)";
        private const string PARM_NEWS_TITLE = "@title";
        private const string PARM_NEWS_DATA = "@data";
        private const string PARM_NEWS_DATE = "@date";
        private const string PARM_NEWS_CATEGORY = "@category";
        private const string PARM_NEWS_IMAGEURL = "@imageurl";

        public NewsManager()
        { }
        /// <summary>
        /// 添加新闻
        /// </summary>
        /// <param name="newsTitle">新闻主题</param>
        /// <param name="newsData">新闻内容</param>
        /// <param name="newsCategory">新闻类别</param>
        /// <param name="imageUrl">新闻的图片链接地址</param>
        /// <returns>添加是否成功</returns>
        public bool AddNews(string newsTitle, string newsData, string newsCategory, string imageUrl)
        {
            //使用StringBuild连接字符串比使用“+”效率高得多
            StringBuilder strSQL = new StringBuilder();
            //获取缓存参数,如果没有,此方法会自动创建缓存列表
            SqlParameter[] newsParms = GetParameters();
            //创建执行语句的SQL命令
            SqlCommand cmd = new SqlCommand();
            //依次给参数赋值
            newsParms[0].Value = newsTitle;
            newsParms[1].Value = newsData;
            //注意新闻发布的日期取当日
            newsParms[2].Value = DateTime.Now;
            newsParms[3].Value = imageUrl;
            newsParms[4].Value = newsCategory;

            //遍历所有参数,并将参数添加到SqlCommand命令中
            foreach (SqlParameter parm in newsParms)
                cmd.Parameters.Add(parm);
            //获取数据库的连接字符串
            using (SqlConnection conn = new SqlConnection(SqlHelper.ConnectionStringLocalTransaction))
            {
                strSQL.Append(SQL_INSERT_NEWSINFO);
                //打开数据库连接,执行命令
                conn.Open();
                //设置Sqlcommand命令的属性
                cmd.Connection = conn;
                cmd.CommandType = CommandType.Text;
                cmd.CommandText = strSQL.ToString();
                //执行添加的SqlCommand命令
                int val = cmd.ExecuteNonQuery();
                //清空SqlCommand命令中的参数
                cmd.Parameters.Clear();
                //判断是否添加成功,注意返回的是添加是否成功,不是影响的行数
                if (val > 0)
                    return true;
                else
                    return false;
            }
        }

        /// <summary>
        /// 创建或获取缓存参数的私有方法
        /// </summary>
        /// <returns>返回参数列表</returns>
        private SqlParameter[] GetParameters()
        {
            //将SQL_INSERT_NEWSINFO作为哈希表缓存的键值
            SqlParameter[] parms = SqlHelper.GetCachedParameters(SQL_INSERT_NEWSINFO);

            //首先判断缓存是否已经存在
            if (parms == null)
            {
                //缓存不存在的情况下,新建参数列表
                parms = new SqlParameter[]
                {
                new SqlParameter(PARM_NEWS_TITLE, SqlDbType.NVarChar, 500),
                new SqlParameter(PARM_NEWS_DATA, SqlDbType.NVarChar, 1000),
                new SqlParameter(PARM_NEWS_DATE, SqlDbType.DateTime),
                new SqlParameter(PARM_NEWS_IMAGEURL, SqlDbType.NVarChar, 50),
                new SqlParameter(PARM_NEWS_CATEGORY, SqlDbType.NVarChar, 20)
                };

                //将新建的参数列表添加到哈希表中缓存起来
                SqlHelper.CacheParameters(SQL_INSERT_NEWSINFO);
            }
            //返回参数
            return parms;
        }
    }
}

(5) css style add.css

.add-in {
    width: 816px;
    margin: 0 auto;
}
#form1 {
    min-height: 500px;
    border: 1px solid #dadce0;
    border-radius: 5px;
    background-color: #fff;
}
.title {
    padding: 32px 64px 24px;
}
#txttitle {
    display: block;
    width: 688px;
    height: 55px;
    margin: 0 auto;
    color: #606266;
    box-sizing: border-box;
    line-height: 32px;
    font-size: 23px;
    font-weight: 600;
    overflow: hidden;
    border-bottom: 1px solid #606266;
}
#txttitle::-webkit-input-placeholder {
    color: #b2b2b2;
}
.content {
    width: 816px;
    padding: 0 64px;
}
#txtcontent {
    min-height: 500px;
    min-width: 690px;
    margin: 0 auto;
    resize: none;
    border: none;
    outline: none;
    font-size: 16px;
    color: #4d4d4d;
    font-weight: normal;
    line-height: 26px;
    overflow-x: auto;
    overflow-y: hidden;
}
#txtcontent::-webkit-input-placeholder {
    color: #b2b2b2;
}
.mageurl {
    padding: 24px 64px;
    box-sizing: border-box;
}
#Label1, #Label2 {
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding-bottom: 12px;
}
#txtimageurl {
    padding: 8px;
    font-size: 14px;
    line-height: 24px;
    border: 1px solid #606266;
    border-radius: 4px;
    color: #606266;
}
.category {
    padding: 0 64px;
    box-sizing: border-box;
}
#ddlcategory {
    font-size: 14px;
    line-height: 24px;
    border-radius: 4px;
    color: #606266;
    background-color: #fff;
}
.button {
    padding: 24px 64px 64px;
    box-sizing: border-box;
}
#Button1 {
    float: right;
}
.button input {
    float: left;
}
#Button1,
.button input {
    height: 40px;
    padding: 8px 42px;
    line-height: 22px;
    color: #999aaa;
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    border: 1px solid #555666;
    background-color: #fff;
    border-radius: 20px;
}
#Button1:hover,
.button input:hover {
    color: #093759
}

9. Login interface

(1) Web form Login.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Myweb.Manager.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>天眼Y-焦点事件速递</title>
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="../css/Normalize.css"/>
    <!-- 公共的css样式 -->
    <link rel="stylesheet" href="../css/base.css"/>
    <!-- 登录页面的css样式 -->
    <link rel="stylesheet" href="../css/users.css"/>
</head>
<body>
    <!-- 页面头部分 -->
    <div class="middle" runat="server">
        <div class="nav clearfix w"  runat="server">
            <!-- logo部分 -->
            <div class="logo fl">
                <a href="../Default.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo_03.png" />
                </a>
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar fl">
                <ul>
                    <li>
                        <asp:HyperLink ID="Home" runat="server" NavigateUrl="~/Default.aspx"><span>首页</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="News" runat="server" NavigateUrl="~/Manager/AddNews.aspx"><span>发布新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Manager" runat="server" NavigateUrl="~/Manager/Login.aspx"><span>管理新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Personal" runat="server" NavigateUrl="~/Stationmaster.aspx"><span>关于站长</span></asp:HyperLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 中间主体部分 -->
    <div class="w users" runat="server">
        <div class="users-in" runat="server">
            <form id="form1" runat="server">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/images/logo_03.png" Width="90px" />
                <h1>登录</h1>
                <p>以继续管理新闻</p>
                <fieldset>
                    <legend>用户名</legend>
                    <asp:TextBox ID="txtAdmin" runat="server"></asp:TextBox>  
                </fieldset>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                    ErrorMessage="  请输入用户名" ControlToValidate="txtAdmin"></asp:RequiredFieldValidator>
                <fieldset>
                    <legend>密 码</legend>
                    <asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox>
                </fieldset>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                        ErrorMessage="  请输入密码" ControlToValidate="txtPwd"></asp:RequiredFieldValidator>
                <div class="towbutton clearfix">
                    <a href="Register.aspx">创建账号</a>
                    <asp:Button ID="Button1" runat="server" Text="完成" OnClick="Button1_Click" />
                </div>
            </form>
        </div>
    </div>
    <!-- 页面底部分 -->
    <div class="footer" runat="server">
        <div class="footer-in w">
            <h1>其他网站</h1>
            <p class="othernet">
                <a href="https://cn.bing.com/?scope=web&FORM=ANNTH1">必应</a>
                <a href="https://www.baidu.com/?tn=02003390_30_hao_pghttps://www.baidu.com/?tn=02003390_30_hao_pg">百度</a>
                <a href="https://vip.iqiyi.com/cps_pc.html">爱奇艺</a>
                <a href="https://www.mgtv.com/">芒果TV</a>
                <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=05946b19-7c4f-4443-b244-f1e37a23abbc&union_place=un">苏宁易购</a>
                <a href="https://www.msn.cn/zh-cn/lifestyle/shopping?ocid=msedgntp&cvid=2106713fc5ba43e29da7323af979881d">精选购物</a>
                <a href="https://tv.cctv.com/">CCTV</a>
                <a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1183900030_1813100136_110592400466:1652539528_078_1000156018&union_lens=lensId:OPT@1605248376@0bba6580_e459_175c0425fa9_4681@01;eventPageId:1586925572118;recoveryid:1652539528_078_1000156018&bxsign=tbkD7h3X8wzgVRh1OTmdJZONQCOsFcXMK1ccdlt6zI5/OzI77FFr0azst/1Dh91W9umglfxBkG+fu+pJknlCvwB8gGczvtxhl1LCeN9MnxGBpg=">天猫</a>
                <a href="https://www.taobao.com/">淘宝</a>
                <a href="https://www.jd.com/?cu=true&utm_source=c.mktdatatech.com&utm_medium=tuiguang&utm_campaign=t_16282_172613369&utm_term=b44015abbfe64f178dd3285a545224b2">京东</a>
                <a href="https://ms.vipstatic.com/union/deeplink/deeplink.html?link_url=vipshop%3A%2F%2FgoHome%3Ftra_from%3Dtra%3AC01V0000kve7p4us%3A%40_%401652539633245%3Amig_code%3A224842_168_0_QW5haGVpbVJNLXdlaXBpbmh1aQ%3D%3D_1%3A23939a8d04024296b4735f9ae37b39b9&dest_url=http%3A%2F%2Fwww.vip.com%2F">唯品会</a>
                <a href="https://www.xiaomiyoupin.com/">小米有品</a>
                <a href="https://hd.oppo.com/act/m/2021/CPS/index.html?title=title&utm_source=duomai&utm_medium=191943086">欢太商城</a>
                <a href="http://www.people.com.cn/">人民网</a>
                <a href="http://www.xinhuanet.com/">新华网</a>
            </p>
            <p>@ 2022年YJY Inc.保留所有权利。-19物联网工程有限公司</p>
        </div>
    </div>
</body>
</html>

(2)Login.aspx.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Myweb.Manager
{
    public partial class Login : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
        }

        public string connStr = ConfigurationManager.ConnectionStrings["NewsConnectionString"].ConnectionString;
        protected void Button1_Click(object sender, EventArgs e)
        {
            //获取登录名和密码信息
            String strLoginID = txtAdmin.Text;
            String strLoginPwd = txtPwd.Text;
            //访问数据库Newsuser表,验证登录账号
            //第一步建立连接对象conn
            SqlConnection conn = new SqlConnection(connStr);
            //设置SQL查询语句
            string sql = "select * from Newsuser where UserID='" + strLoginID + "' and UserPassword='" + strLoginPwd + "'";
            //创建sqlCommand对象
            SqlCommand cmd = new SqlCommand(sql, conn);
            //打开conn连接对象
            conn.Open();
            //利用SqlCommand对象,创建SqlDataReader对象,用于判断SQL语句执行的结果
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.Read()) //如果有数据,则dr.Read()为true
            {
                //登录验证成功
                //赋Session["Login"]值用于判断是否正常登录
                Session["LoginXX"] = "ok";
                Session["UserID"] = dr["UserID"].ToString();//获取匹配记录的用户名
                //登录成功后跳转
                Response.Redirect("~/Manager/EditNews.aspx");
            }
            else
            {
                //alert()弹窗函数
                Response.Write("<script>alert('用户名或密码错误,请重新输入!');</script>");
            }
        }
    }
}

 (3) css style users

@font-face { /* 声明字体 */
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?r5tos9');
    src: url('../fonts/icomoon.eot?r5tos9#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?r5tos9') format('truetype'), url('../fonts/icomoon.woff?r5tos9') format('woff'), url('../fonts/icomoon.svg?r5tos9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.users-in {
    width: 900px;
    margin: 0 auto;
}
#form1 {
    width: 530px;
    min-height: 500px;
    margin: 0 auto;
    border: 1px solid #dadce0;
    border-radius: 10px;
    position: relative;
}
#Image2 {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}
.users-in h1 {
    display: block;
    margin-top: 180px;
    text-align: center;
    font-weight: normal;
    font-size: 24px;
    height: 50px;
    color: #202124;
}
.users-in p {
    text-align: center;
    height: 19px;
    font-size: 16px;
    padding-bottom: 26px;
    color: #202124;
    font-weight: 400;
}
.users-in fieldset {
    margin: 0 auto;
    height: 54px;
    width: 366px;
    border-radius: 5px;
    border-color: #1a73e8;
    color: #1a73e8;
    margin-top: 10px;
}
.users-in fieldset legend {
    margin-left: 10px;
    padding: 0 5px;
}
.users-in fieldset input {
    height: 10px;
    width: 336px;
    padding: 13px 15px;
    background-color: #f6f6f6;
    color: #202124;
    font-size: 17px;
}
.users-in span {
    font-family: icomoon;
    font-size: 14px;
    line-height: 250%;
    color: #d93025;
    margin-left: 80px;
}
.users-in .towbutton {
    height: 44px;
    width: 366px;
    margin: 50px auto;
}
.users-in .towbutton a {
    color: #1a73e8;
    font-size: 17px;
    line-height: 44px;
}
.users-in .towbutton input {
    height: 44px;
    width: 112px;
    display: block;
    float: right;
    background-color: #1a73e8;
    color: #fff;
    border-radius: 5px;
}

10. Registration interface

(1) Web Form Register.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="Myweb.Manager.Register" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>天眼Y-焦点事件速递</title>
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="../css/Normalize.css"/>
    <!-- 公共的css样式 -->
    <link rel="stylesheet" href="../css/base.css"/>
    <!-- 登录页面的css样式 -->
    <link rel="stylesheet" href="../css/users.css"/>
</head>
<body>
    <!-- 页面头部分 -->
    <div class="middle" runat="server">
        <div class="nav clearfix w"  runat="server">
            <!-- logo部分 -->
            <div class="logo fl">
                <a href="../Default.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo_03.png" />
                </a>
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar fl">
                <ul>
                    <li>
                        <asp:HyperLink ID="Home" runat="server" NavigateUrl="~/Default.aspx"><span>首页</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="News" runat="server" NavigateUrl="~/Manager/AddNews.aspx"><span>发布新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Manager" runat="server" NavigateUrl="~/Manager/Login.aspx"><span>管理新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Personal" runat="server" NavigateUrl="~/Stationmaster.aspx"><span>关于站长</span></asp:HyperLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 中间主体部分 -->
    <div class="w users" runat="server">
        <div class="users-in" runat="server">
            <form id="form1" runat="server">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/images/logo_03.png" Width="90px" />
                <h1>注册</h1>
                <p>以继续登录</p>
                <fieldset>
                    <legend>用户名</legend>
                    <asp:TextBox ID="txtAdmin" runat="server"></asp:TextBox>
                </fieldset>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                    ErrorMessage="用户名不能为空!" ControlToValidate="txtAdmin"></asp:RequiredFieldValidator>
                <fieldset>
                    <legend>密 码</legend>
                    <asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox>
                </fieldset>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                    ErrorMessage="密码不能为空!" ControlToValidate="txtPwd"></asp:RequiredFieldValidator>
                <fieldset>
                    <legend>昵 称</legend>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                </fieldset>
                <div class="towbutton clearfix">
                    <a href="Login.aspx">返回登录</a>
                    <asp:Button ID="Button1" runat="server" Text="创建" OnClick="Button1_Click" />
                </div>
            </form>
        </div>
    </div>
    <!-- 页面底部分 -->
    <div class="footer" runat="server">
        <div class="footer-in w">
            <h1>其他网站</h1>
            <p class="othernet">
                <a href="https://cn.bing.com/?scope=web&FORM=ANNTH1">必应</a>
                <a href="https://www.baidu.com/?tn=02003390_30_hao_pghttps://www.baidu.com/?tn=02003390_30_hao_pg">百度</a>
                <a href="https://vip.iqiyi.com/cps_pc.html">爱奇艺</a>
                <a href="https://www.mgtv.com/">芒果TV</a>
                <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=05946b19-7c4f-4443-b244-f1e37a23abbc&union_place=un">苏宁易购</a>
                <a href="https://www.msn.cn/zh-cn/lifestyle/shopping?ocid=msedgntp&cvid=2106713fc5ba43e29da7323af979881d">精选购物</a>
                <a href="https://tv.cctv.com/">CCTV</a>
                <a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1183900030_1813100136_110592400466:1652539528_078_1000156018&union_lens=lensId:OPT@1605248376@0bba6580_e459_175c0425fa9_4681@01;eventPageId:1586925572118;recoveryid:1652539528_078_1000156018&bxsign=tbkD7h3X8wzgVRh1OTmdJZONQCOsFcXMK1ccdlt6zI5/OzI77FFr0azst/1Dh91W9umglfxBkG+fu+pJknlCvwB8gGczvtxhl1LCeN9MnxGBpg=">天猫</a>
                <a href="https://www.taobao.com/">淘宝</a>
                <a href="https://www.jd.com/?cu=true&utm_source=c.mktdatatech.com&utm_medium=tuiguang&utm_campaign=t_16282_172613369&utm_term=b44015abbfe64f178dd3285a545224b2">京东</a>
                <a href="https://ms.vipstatic.com/union/deeplink/deeplink.html?link_url=vipshop%3A%2F%2FgoHome%3Ftra_from%3Dtra%3AC01V0000kve7p4us%3A%40_%401652539633245%3Amig_code%3A224842_168_0_QW5haGVpbVJNLXdlaXBpbmh1aQ%3D%3D_1%3A23939a8d04024296b4735f9ae37b39b9&dest_url=http%3A%2F%2Fwww.vip.com%2F">唯品会</a>
                <a href="https://www.xiaomiyoupin.com/">小米有品</a>
                <a href="https://hd.oppo.com/act/m/2021/CPS/index.html?title=title&utm_source=duomai&utm_medium=191943086">欢太商城</a>
                <a href="http://www.people.com.cn/">人民网</a>
                <a href="http://www.xinhuanet.com/">新华网</a>
            </p>
            <p>@ 2022年YJY Inc.保留所有权利。-19物联网工程有限公司</p>
        </div>
    </div>
</body>
</html>

(2)Register.aspx.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Myweb.Manager
{
    public partial class Register : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
        }

        public string connStr = ConfigurationManager.ConnectionStrings["NewsConnectionString"].ConnectionString;
        protected void Button1_Click(object sender, EventArgs e)
        {
            //获取登录名和密码信息
            String strLoginID = txtAdmin.Text;
            String strLoginPwd = txtPwd.Text;
            String strLoginName = txtName.Text;
            //访问数据库Newsuser表,注册信息
            //第一步建立连接对象conn
            SqlConnection conn = new SqlConnection(connStr);
            //设置SQL查询语句
            string sql = "insert into [Newsuser](UserID,UserPassword,UserName) values('" + strLoginID + "','" + strLoginPwd + "','" + strLoginName +"')";
            //创建sqlCommand对象
            SqlCommand cmd = new SqlCommand();
            //打开conn连接对象
            conn.Open();
            if(check(strLoginID, cmd))
            {
                cmd.Connection = conn;
                cmd.CommandText = sql;
                //建dr存储ExecuteNonQuery结果,用于判断SQL语句执行的结果
                int dr = cmd.ExecuteNonQuery();
                if (dr > 0) //如果有数据,则dr.Read()为true
                {
                    //注册成功
                    Response.Write("<script>alert('注册成功!');</script>");
                    //注册成功后跳转
                    Response.Redirect("Login.aspx");
                }
                else
                {
                    //alert()弹窗函数
                    Response.Write("<script>alert('注册失败!');</script>");
                }
            }
            else
            {
                Response.Write("<script>alert('用户名已存在!');</script>");
            }
            
        }
        protected bool check(string u, SqlCommand cmd)
        {
            //建立连接对象conn
            SqlConnection conn1 = new SqlConnection(connStr);
            //设置SQL查询语句
            string sql1 = "select * from Newsuser where UserID='" + u + "'";
            //打开conn连接对象
            conn1.Open();
            cmd.Connection = conn1;
            cmd.CommandText = sql1;
            //利用SqlCommand对象,创建SqlDataReader对象,用于判断SQL语句执行的结果
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.Read()) //如果有数据,则dr.Read()为true
            {
                return false;
            }
            else
            {
                return true;
            }
        }
    }
}

(3) css style users.css

same login interface

11. Management news interface

(1) Web form Edit.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditNews.aspx.cs" Inherits="Myweb.Manager.EditNews" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>天眼Y-焦点事件速递</title>
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="../css/Normalize.css"/>
    <!-- 公共的css样式 -->
    <link rel="stylesheet" href="../css/base.css"/>
    <!-- 管理界面的css样式 -->
    <link rel="stylesheet" href="../css/edit.css"/>
</head>
<body>
    <!-- 页面头部分 -->
    <div class="middle" runat="server">
        <div class="nav clearfix w"  runat="server">
            <!-- logo部分 -->
            <div class="logo fl">
                <a href="../Default.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo_03.png" />
                </a>
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar fl">
                <ul>
                    <li>
                        <asp:HyperLink ID="Home" runat="server" NavigateUrl="~/Default.aspx"><span>首页</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="News" runat="server" NavigateUrl="~/Manager/AddNews.aspx"><span>发布新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Manager" runat="server" NavigateUrl="~/Manager/Login.aspx"><span>管理新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Personal" runat="server" NavigateUrl="~/Stationmaster.aspx"><span>关于站长</span></asp:HyperLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 中间主体部分 -->
    <div class="w edit" runat="server">
        <form id="form1" runat="server">
            <div class="clearfix">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="NewsID" DataSourceID="SqlDataSource1" >
                    <Columns>
                        <asp:BoundField DataField="NewsTitle" HeaderText="新闻标题" SortExpression="NewsTitle"/>
                        <asp:BoundField DataField="NewsData" HeaderText="内容" SortExpression="NewsData" />
                        <asp:BoundField DataField="NewsDate" HeaderText="发布时间" SortExpression="NewsDate" />
                        <asp:BoundField DataField="NewsImageUrl" HeaderText="图片路径" SortExpression="NewsImageUrl" />
                        <asp:BoundField DataField="NewsCategory" HeaderText="新闻类别" SortExpression="NewsCategory" />
                        <asp:CommandField ShowEditButton="True" HeaderText="编辑" EditText="" />
                        <asp:CommandField ShowDeleteButton="True" HeaderText="删除" DeleteText="" />
                    </Columns>
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString %>" DeleteCommand="DELETE FROM [NewsInfo] WHERE [NewsID] = @NewsID" InsertCommand="INSERT INTO [NewsInfo] ([NewsTitle], [NewsData], [NewsDate], [NewsImageUrl], [NewsCategory]) VALUES (@NewsTitle, @NewsData, @NewsDate, @NewsImageUrl, @NewsCategory)" SelectCommand="SELECT * FROM [NewsInfo]" UpdateCommand="UPDATE [NewsInfo] SET [NewsTitle] = @NewsTitle, [NewsData] = @NewsData, [NewsDate] = @NewsDate, [NewsImageUrl] = @NewsImageUrl, [NewsCategory] = @NewsCategory WHERE [NewsID] = @NewsID">
                    <DeleteParameters>
                        <asp:Parameter Name="NewsID" Type="Int32" />
                    </DeleteParameters>
                    <InsertParameters>
                        <asp:Parameter Name="NewsTitle" Type="String" />
                        <asp:Parameter Name="NewsData" Type="String" />
                        <asp:Parameter Name="NewsDate" Type="DateTime" />
                        <asp:Parameter Name="NewsImageUrl" Type="String" />
                        <asp:Parameter Name="NewsCategory" Type="String" />
                    </InsertParameters>
                    <UpdateParameters>
                        <asp:Parameter Name="NewsTitle" Type="String" />
                        <asp:Parameter Name="NewsData" Type="String" />
                        <asp:Parameter Name="NewsDate" Type="DateTime" />
                        <asp:Parameter Name="NewsImageUrl" Type="String" />
                        <asp:Parameter Name="NewsCategory" Type="String" />
                        <asp:Parameter Name="NewsID" Type="Int32" />
                    </UpdateParameters>
                </asp:SqlDataSource>
            </div>
        </form>
    </div>
    <!-- 页面底部分 -->
    <div class="footer" runat="server">
        <div class="footer-in w">
            <h1>其他网站</h1>
            <p class="othernet">
                <a href="https://cn.bing.com/?scope=web&FORM=ANNTH1">必应</a>
                <a href="https://www.baidu.com/?tn=02003390_30_hao_pghttps://www.baidu.com/?tn=02003390_30_hao_pg">百度</a>
                <a href="https://vip.iqiyi.com/cps_pc.html">爱奇艺</a>
                <a href="https://www.mgtv.com/">芒果TV</a>
                <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=05946b19-7c4f-4443-b244-f1e37a23abbc&union_place=un">苏宁易购</a>
                <a href="https://www.msn.cn/zh-cn/lifestyle/shopping?ocid=msedgntp&cvid=2106713fc5ba43e29da7323af979881d">精选购物</a>
                <a href="https://tv.cctv.com/">CCTV</a>
                <a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1183900030_1813100136_110592400466:1652539528_078_1000156018&union_lens=lensId:OPT@1605248376@0bba6580_e459_175c0425fa9_4681@01;eventPageId:1586925572118;recoveryid:1652539528_078_1000156018&bxsign=tbkD7h3X8wzgVRh1OTmdJZONQCOsFcXMK1ccdlt6zI5/OzI77FFr0azst/1Dh91W9umglfxBkG+fu+pJknlCvwB8gGczvtxhl1LCeN9MnxGBpg=">天猫</a>
                <a href="https://www.taobao.com/">淘宝</a>
                <a href="https://www.jd.com/?cu=true&utm_source=c.mktdatatech.com&utm_medium=tuiguang&utm_campaign=t_16282_172613369&utm_term=b44015abbfe64f178dd3285a545224b2">京东</a>
                <a href="https://ms.vipstatic.com/union/deeplink/deeplink.html?link_url=vipshop%3A%2F%2FgoHome%3Ftra_from%3Dtra%3AC01V0000kve7p4us%3A%40_%401652539633245%3Amig_code%3A224842_168_0_QW5haGVpbVJNLXdlaXBpbmh1aQ%3D%3D_1%3A23939a8d04024296b4735f9ae37b39b9&dest_url=http%3A%2F%2Fwww.vip.com%2F">唯品会</a>
                <a href="https://www.xiaomiyoupin.com/">小米有品</a>
                <a href="https://hd.oppo.com/act/m/2021/CPS/index.html?title=title&utm_source=duomai&utm_medium=191943086">欢太商城</a>
                <a href="http://www.people.com.cn/">人民网</a>
                <a href="http://www.xinhuanet.com/">新华网</a>
            </p>
            <p>@ 2022年YJY Inc.保留所有权利。-19物联网工程有限公司</p>
        </div>
    </div>
</body>
</html>

 (2) css style edit.css

@font-face { /* 声明字体 */
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?r5tos9');
    src: url('../fonts/icomoon.eot?r5tos9#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?r5tos9') format('truetype'), url('../fonts/icomoon.woff?r5tos9') format('woff'), url('../fonts/icomoon.svg?r5tos9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
tbody {
    border-color: #ccc;
}
tr {
    overflow: hidden;
    display: table;
    width: 1190px;
    overflow: hidden;
}
th {
    display: block;
    background-color: #7c4e8d;
    color: #d7ecf3;
    height: 50px;
    float: left;
    text-align: center;
    line-height: 50px;
}
td {
    height: 60px;
    float: left;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 60px;
}
td input {
    width: 100%;
    height: 60px;
    overflow: scroll;
    white-space: normal;
}
td a {
    font-family: icomoon;
    color: #666;
}
td a:hover {
    color: #7c4e8d;
}
tr th:nth-child(1),
tr td:nth-child(1) {
    width: 80px;
}
tr th:nth-child(2),
tr td:nth-child(2) {
    width: 520px;
}
tr th:nth-child(3),
tr td:nth-child(3),
tr td:nth-child(3) input {
    width: 180px;
    text-align: center;
}
tr th:nth-child(4),
tr td:nth-child(4) {
    width: 186px;
}
tr th:nth-child(5),
tr td:nth-child(5),
tr td:nth-child(5) input {
    width: 80px;
    text-align: center;
}
tr th:nth-child(6),
tr td:nth-child(6),
tr td:nth-child(6) input {
    width: 70px;
    text-align: center;
}
tr th:nth-child(7),
tr td:nth-child(7),
tr td:nth-child(7) input {
    width: 60px;
    text-align: center;
}

12. Webmaster page

(1) Web form Stationmaster.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Stationmaster.aspx.cs" Inherits="Myweb.Stationmaster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>天眼Y-焦点事件速递</title>
    <!-- css初始化文件 -->
    <link rel="stylesheet" href="css/Normalize.css"/>
    <!-- 公共的css样式 -->
    <link rel="stylesheet" href="css/base.css"/>
    <!-- 站长页面的css样式 -->
    <link rel="stylesheet" href="css/master.css"/>
</head>
<body>
    <!-- 页面头部分 -->
    <div class="middle" runat="server">
        <div class="nav clearfix w"  runat="server">
            <!-- logo部分 -->
            <div class="logo fl">
                <a href="Default.aspx">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/logo_03.png" />
                </a>
            </div>
            <!-- 导航栏部分 -->
            <div class="navbar fl">
                <ul>
                    <li>
                        <asp:HyperLink ID="Home" runat="server" NavigateUrl="~/Default.aspx"><span>首页</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="News" runat="server" NavigateUrl="~/Manager/AddNews.aspx"><span>发布新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Manager" runat="server" NavigateUrl="~/Manager/Login.aspx"><span>管理新闻</span></asp:HyperLink>
                    </li>
                    <li>
                        <asp:HyperLink ID="Personal" runat="server" NavigateUrl="~/Stationmaster.aspx"><span>关于站长</span></asp:HyperLink>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 中间主体部分 -->
    <div class="yjy" runat="server">
        <div class="yjy-in" runat="server">
            <form id="form1" runat="server">
                <div class="avatar">
                    <asp:Image ID="Image" runat="server" ImageUrl="~/images/avatar.png" Width="150px" />
                    <div class="wechat"></div>
                </div>
                <div class="name">
                    <span>姓名:</span>
                    <span>你的名字</span>
                </div>
                <div class="class">
                    <span>班级:</span>
                    <span>你的班级</span>
                </div>
                <div class="id">
                    <span>学号:</span>
                    <span>你的学号</span>
                </div>
                <div class="project">
                    <span>项目:</span>
                    <span>小型网站建设</span>
                </div>
                <div class="teachter">
                    <span>指导:</span>
                    <span>你的老师</span>
                </div>
                <div class="time">
                    <span>时间:</span>
                    <span>你的创作时间</span>
                </div>
                <div class="school">
                    <span>学校:</span>
                    <span><a href="#">你的学校网址</a></span>
                </div>
            </form>
        </div>
    </div>
    <!-- 页面底部分 -->
    <div class="footer" runat="server">
        <div class="footer-in w">
            <h1>其他网站</h1>
            <p class="othernet">
                <a href="https://cn.bing.com/?scope=web&FORM=ANNTH1">必应</a>
                <a href="https://www.baidu.com/?tn=02003390_30_hao_pghttps://www.baidu.com/?tn=02003390_30_hao_pg">百度</a>
                <a href="https://vip.iqiyi.com/cps_pc.html">爱奇艺</a>
                <a href="https://www.mgtv.com/">芒果TV</a>
                <a href="https://www.suning.com/?utm_source=union&utm_medium=005007&adtype=5&utm_campaign=05946b19-7c4f-4443-b244-f1e37a23abbc&union_place=un">苏宁易购</a>
                <a href="https://www.msn.cn/zh-cn/lifestyle/shopping?ocid=msedgntp&cvid=2106713fc5ba43e29da7323af979881d">精选购物</a>
                <a href="https://tv.cctv.com/">CCTV</a>
                <a href="https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_1183900030_1813100136_110592400466:1652539528_078_1000156018&union_lens=lensId:OPT@1605248376@0bba6580_e459_175c0425fa9_4681@01;eventPageId:1586925572118;recoveryid:1652539528_078_1000156018&bxsign=tbkD7h3X8wzgVRh1OTmdJZONQCOsFcXMK1ccdlt6zI5/OzI77FFr0azst/1Dh91W9umglfxBkG+fu+pJknlCvwB8gGczvtxhl1LCeN9MnxGBpg=">天猫</a>
                <a href="https://www.taobao.com/">淘宝</a>
                <a href="https://www.jd.com/?cu=true&utm_source=c.mktdatatech.com&utm_medium=tuiguang&utm_campaign=t_16282_172613369&utm_term=b44015abbfe64f178dd3285a545224b2">京东</a>
                <a href="https://ms.vipstatic.com/union/deeplink/deeplink.html?link_url=vipshop%3A%2F%2FgoHome%3Ftra_from%3Dtra%3AC01V0000kve7p4us%3A%40_%401652539633245%3Amig_code%3A224842_168_0_QW5haGVpbVJNLXdlaXBpbmh1aQ%3D%3D_1%3A23939a8d04024296b4735f9ae37b39b9&dest_url=http%3A%2F%2Fwww.vip.com%2F">唯品会</a>
                <a href="https://www.xiaomiyoupin.com/">小米有品</a>
                <a href="https://hd.oppo.com/act/m/2021/CPS/index.html?title=title&utm_source=duomai&utm_medium=191943086">欢太商城</a>
                <a href="http://www.people.com.cn/">人民网</a>
                <a href="http://www.xinhuanet.com/">新华网</a>
            </p>
            <p>@ 2022年YJY Inc.保留所有权利。-19物联网工程有限公司</p>
        </div>
    </div>
</body>
</html>

(2) css style master.css

.yjy-in {
    width: 816px;
    margin: 0 auto;
}
#form1 {
    min-height: 500px;
    border: 1px solid #dadce0;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
}
.avatar {
    position: absolute;
    top: 70px;
    left: 90px;
}
.avatar img {
    border-radius: 5px;
}
.wechat {
    position: relative;
}
.wechat { 
    height: 200px;
    width: 0;
    position: absolute;
    top: 180px;
    left: -25px;
    background: url(../images/WeChat.png);
    background-size: 200px 200px;
    transition: all 0.2s;
}
.avatar:hover .wechat {
    width: 200px!important;
}
.name,
.class,
.id,
.project,
.teachter,
.time,
.school {
    width: 300px;
    color: #606266;
    line-height: 40px;
    font-size: 24px;
    font-weight: 600;
    box-sizing: border-box;
    border-bottom: 1px solid #606266;
    position: absolute;
    left: 40%;
    padding-left: 30px;
}
.school a {
    color: #606266;
    line-height: 40px;
    font-size: 24px;
    font-weight: 600;
}
.school a:hover {
    color: #7c4e8d;
}
.name {
    
    top: 50px;
}
.class {
    top: 100px;
}
.id {
    top: 150px;
}
.project {
    top: 200px;
}
.teachter {
    top: 250px;
}
.time {
    top: 300px;
}
.school {
    top: 350px;
}

Summarize

Through the production of this website, I have a deeper understanding of ASP.NET and have some interests. At the same time, I also have an in-depth understanding of the front-end development technologies such as html and css learned before in the process of making web pages and some techniques, and I am more proficient in some common methods of making web pages.

In the specific production process, I think that the design of a web page should meet the following conditions:

① Determine the content of the web design

    A website must have a clear theme, and the whole website revolves around this theme. Before designing the webpage, it is necessary to clarify the purpose of the website and what it is used for. All pages are made around this content. With clear content, you can Do some preliminary layout design for the web page.

    ② Be a user

    In the process of making a web page, you should personally experience the various functions of the website as a user in order to really discover and solve problems, and then know which areas need to be improved. Try not to let users find problems. These problems are solved.

    ③ Optimize content

Content is the core of the entire website. The content arrangement of the website must be clearly defined before the website design. When planning a website in detail, you can first list the content outline of each page in a tree structure, especially when making a large website, it is especially necessary to plan the structure well, and also consider possible future Scalability, so that you don’t have to change and change the structure of the entire website after you do it well, so you don’t waste time and energy.

Guess you like

Origin blog.csdn.net/weixin_55915644/article/details/124974460