ASP.NET プレスリリース サイト

目次

1. 実現

1. データベース ニュースデータベース

(1) データテーブル NewsInfo

(2) データテーブル

2. データベース構成コード

3. CSS初期化ファイルNormalize.css

4.共通CSSスタイルbase.css

5. ホームページ

(1) Web フォーム Default.aspx

(2) CSSスタイルindex.css

6. ニュース詳細ページ

(1) WebフォームNewsData.apsx

(2) cssスタイルdata.css

7. ニュースリストインターフェース

(1) Web フォーム NewsList.aspx

 (2) cssスタイルリスト.css

8. リリースニュースインターフェース

 (1) Web フォーム AddNews.aspx

(2)AddNews.aspx.cs

(3) SqlHelperクラス

(4) NewsManagerクラス

(5) cssスタイルadd.css

9. ログインインターフェース

(1) Web フォーム Login.aspx

(2)ログイン.aspx.cs

 (3) CSSスタイルのユーザー

10. 登録インターフェース

(1) Web フォーム Register.aspx

(2).aspx.cs を登録する

(3) CSSスタイル users.css

11. 経営ニュースインターフェース

(1) Web フォーム Edit.aspx

 (2) cssスタイルedit.css

12. ウェブマスターページ

(1) Web フォーム Stationmaster.aspx

(2) CSSスタイルmaster.css

要約する


開発プラットフォーム: vs2022 および SSMS

1. 実現

1. データベース ニュースデータベース

(1) データテーブル 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) データテーブル

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

2. データベース構成コード

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初期化ファイル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.共通CSSスタイル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. ホームページ

(1) Web フォーム 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スタイル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. ニュース詳細ページ

(1) Webフォーム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スタイル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. ニュースリストインターフェース

(1) Web フォーム 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スタイルリスト.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. リリースニュースインターフェース

 (1) Web フォーム 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クラス

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クラス

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スタイル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. ログインインターフェース

(1) Web フォーム 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)ログイン.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スタイルのユーザー

@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. 登録インターフェース

(1) Web フォーム 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).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スタイル users.css

同じログインインターフェイス

11. 経営ニュースインターフェース

(1) Web フォーム 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スタイル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. ウェブマスターページ

(1) Web フォーム 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スタイル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;
}

要約する

この Web サイトの制作を通じて、ASP.NET についての理解が深まり、いくつかの興味を持ちました。同時に、以前にウェブページを作成する過程で学んだhtmlやcssなどのフロントエンド開発技術やいくつかのテクニックについても深く理解しており、ウェブを作成する一般的な方法のいくつかについてもより習熟しています。ページ。

具体的な制作過程において、Webページのデザインは以下の条件を満たしている必要があると考えます。

①Webデザインの内容を決める

    ウェブサイトには明確なテーマがあり、ウェブサイト全体がそのテーマを中心に展開されます。ウェブページをデザインする前に、ウェブサイトの目的と使用目的を明確にする必要があります。すべてのページはそのコンテンツを中心に作成されます。明確なコンテンツ、Web ページの予備的なレイアウト設計を行うことができます。

    ② ユーザーになる

    Web ページを作成する過程では、ユーザーとして Web サイトのさまざまな機能を実際に体験し、実際に問題点を発見して解決し、どの部分を改善する必要があるかを知る必要があり、ユーザーに問題点を見つけさせないようにする必要があります。問題は解決されます。

    ③コンテンツの最適化

コンテンツはウェブサイト全体の中核です。Webサイトのデザインを行う前に、Webサイトのコンテンツの配置を明確に定義する必要があります。Web サイトを詳細に計画するときは、まず各ページのコンテンツ概要をツリー構造でリストします。特に大規模な Web サイトを作成する場合は、構造を綿密に計画し、将来の拡張性も考慮する必要があります。うまくできた後は、Web サイト全体の構造を何度も変更する必要がないので、時間とエネルギーを無駄にすることがありません。

おすすめ

転載: blog.csdn.net/weixin_55915644/article/details/124974460